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、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)

页面展示