VUE关于DevExtreme的基础使用
VUE关于DevExtreme的基础使用#首先使用npm或者yarn下载框架npm install --save devextreme devextreme-vue在Main.js里面引入import 'devextreme/dist/css/dx.common.css';import 'devextreme/dist/css/dx.darkmoon.css';//此为组件主题样式,可修改dark
·
VUE关于DevExtreme的基础使用#
首先使用npm或者yarn下载框架
npm install --save devextreme devextreme-vue
在Main.js里面引入
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.darkmoon.css';//此为组件主题样式,可修改dark、light、darkmoon等,详情见官方API
试用DataGrid组件,在官网中复制demo代码,在自己的组件中引入
<!-- 一个带分页功能的数据网格 -->
<!-- data-source绑定总数据,只接受数组 -->
<DxDataGrid
:columns="column"
:show-borders="true"
:data-source="personData"
>
<!-- page-size绑定的是默认几条信息分一页 -->
<DxPaging :page-size="10" />
<DxPager
:show-page-size-selector="true"
:allowed-page-sizes="pageSizes"
:show-info="true"
:show-borders="true"
/>
</DxDataGrid>
按需导入组件
import {
DxDataGrid,
DxPaging,
DxPager,
} from 'devextreme-vue/data-grid'
export default {
components: {
DxDataGrid,
DxPaging,
DxPager,
},
data() {
return {
personData: [],
column: ['id', 'name', 'age', 'email', 'birth'],//dataSource绑定的数组里的每条属性写在这里,只接受数组
pageSizes: [5, 10, 20,40], //控制有多少分页选项
}
},
created() {
this.getPersonData()
},
methods: {
async getPersonData() {
const { data : res } = await this.$axios.get('http://www.mocktest.com')
console.log(res)
let arr = res
this.personData = arr
},
},
Mock.js里模拟接口
var arr1 = []
for (let i = 0; i < 40; i++) {
var person = {
id: Random.id(),
name: Random.name(),
age: Random.integer(20, 50),
email: Random.email("qq.com"),
birth: Random.datetime("yyyy-MM-dd HH:mm:ss")
}
console.log(person)
arr1.push(person)
}
Mock.mock('http://www.mocktest.com', 'get', arr1)
页面展示
更多推荐
已为社区贡献1条内容
所有评论(0)