vxe-table 一个强大的表格组件

Vxe Table v4
介绍下按需引用

npm install vite-plugin-lazy-import --save-dev
npm install vxe-table --save-dev

首先安装这两个组件

// 修改文件 vue.config.js
import { lazyImport, VxeResolver } from 'vite-plugin-lazy-import'
export default defineConfig({
    plugins: [
        lazyImport({
           resolvers: [
              VxeResolver({
                 libraryName: 'vxe-table'
              })
           ]
        })
    ]
}         

main.ts里面导入

import lazyVuxTable from './system/view/vex-table'

app.use(lazyVuxTable, {})

//vex-table
简单的写一个vue自定义的use插件
import { type App, type Plugin } from 'vue'
import { VxeTable, VxeColumn, VxeColgroup, VxeGrid, VxeToolbar } from 'vxe-table'
import 'vxe-table/lib/style.css'
const install: Plugin = function (app: App, options = {}) {
  app.use(VxeTable)
  app.use(VxeColumn)
  app.use(VxeColgroup)
  app.use(VxeGrid)
  app.use(VxeToolbar)
}

export default {
  install,
}

然后使用的地方就可以直接使用了

index.vue
<div class="table-wrap">
          <vxe-table :data="tableData">
            <vxe-column type="seq" width="70"></vxe-column>
            <vxe-column field="name" title="Name"></vxe-column>
            <vxe-column field="sex" title="Sex"></vxe-column>
            <vxe-column field="age" title="Age"></vxe-column>
          </vxe-table>
        </div>