vue引入Devextreme

Devextreme是一个非常强大的表格组件，基本涵盖了对表格的所有操作。下面介绍一下vue项目如何引入Devextreme。

1、进入自己的vue项目，npm 安装devextreme

npm install --save devextreme devextreme-vue

2、在Main.js里面引入样式

import 'devextreme/dist/css/dx.common.css'
import 'devextreme/dist/css/dx.light.css'//此为组件主题样式，可修改dx.dark、dx.light、dx.darkmoon等，详情见官方API

3、在vue组件中引用

书写demo代码

<template>
  <div>
    <DxDataGrid
      id="gridContainer"
      :customize-columns="customizeColumns"
      :data-source="dataSource"
      key-expr="id"
      :show-borders="true"
    >
      <DxScrolling row-rendering-mode="virtual"/>
      <DxPaging :page-size="10"/>
      <DxPager
        :visible="true"
        :allowed-page-sizes="pageSizes"
        :display-mode="displayMode"
        :show-page-size-selector="showPageSizeSelector"
        :show-info="showInfo"
        :show-navigation-buttons="showNavButtons"
      />
    </DxDataGrid>
    <div class="options">
      <div class="caption">Options</div>
      <div class="option-container">
        <div class="option">
          <DxSelectBox
            id="dispalyModes"
            :items="displayModes"
            display-expr="text"
            value-expr="value"
            v-model:value="displayMode"
          />
        </div>
        <div class="option">
          <DxCheckBox
            id="showPageSizes"
            text="Show Page Size Selector"
            v-model:value="showPageSizeSelector"
          />
        </div>
        <div class="option">
          <DxCheckBox
            id="showInfo"
            text="Show Info Text"
            :disabled="isCompactMode"
            v-model:value="showInfo"
          />
        </div>
        <div class="option">
          <DxCheckBox
            id="showNavButtons"
            text="Show Navigation Buttons"
            :disabled="isCompactMode"
            v-model:value="showNavButtons"
          />
        </div>
      </div>
    </div>
  </div>
</template>

引入组件

<script>
import {
  DxDataGrid,
  DxScrolling,
  DxPager,
  DxPaging,
} from 'devextreme-vue/data-grid';
import DxSelectBox from 'devextreme-vue/select-box';
import DxCheckBox from 'devextreme-vue/check-box';
import { generateData } from './data.js';

export default {
  components: {
    DxDataGrid,
    DxScrolling,
    DxPager,
    DxPaging,
    DxCheckBox,
    DxSelectBox,
  },
  data() {
    return {
      dataSource: generateData(100000),
      displayModes: [{ text: 'Display Mode \'full\'', value: 'full' }, { text: 'Display Mode \'compact\'', value: 'compact' }],
      displayMode: 'full',
      pageSizes: [5, 10, 'all'],
      showPageSizeSelector: true,
      showInfo: true,
      showNavButtons: true,
    };
  },
  computed: {
    isCompactMode: function() {
      return this.displayMode === 'compact';
    },
  },
  methods: {
    customizeColumns(columns) {
      columns[0].width = 70;
    }
  }
};
</script>

这样就创建好了demo。如果需要深入了解请访问官网https://js.devexpress.com/（需要科学访问要不然非常慢，全英文文档如果英文差需要goole翻译辅助）