引入

按照官网说明，引入 vxe-table

<!-- 引入样式 -->
  <link href="https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css" rel="stylesheet">
  <!-- 引入脚本 -->
  <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
  <script src="https://cdn.jsdelivr.net/npm/vxe-table@next"></script>

main.js

修改 main.js


const ver = window.__ver || ''

Promise.all([
  import('./store/index.js' + ver),
  import('./router/index.js' + ver),
  import('./app.js' + ver),
]).then((res) => {
  // 创建vue3的实例
  const app = Vue.createApp(res[2].default)
    .use(res[0].default) // 挂载vuex
    .use(res[1].default) // 挂载路由
    .use(ElementPlus) // 加载ElementPlus
    .use(VXETable) // 加载 vxe
    .mount('#app') // 挂载Vue的app实例

  // 给 vue 实例挂载内部对象，例如：
  // app.config.globalProperties.$XModal = VXETable.modal
  // app.config.globalProperties.$XPrint = VXETable.print
  // app.config.globalProperties.$XSaveFile = VXETable.saveFile
  // app.config.globalProperties.$XReadFile = VXETable.readFile
})

设置路由


const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => myImport('views/home')
  },
  {
    path: '/About',
    name: 'About',
    component: () => myImport('views/About')
  },
  {
    path: '/component',
    name: 'component',
    component: () => myImport('views/component')
  },
  {
    path: '/store',
    name: 'store',
    component: () => myImport('views/store')
  },
  {
    path: '/vxe',
    name: 'vxe',
    component: () => myImport('views/vxe/index')
  }
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes
})

export default router

尝试

按照官网的第一个例子做一个简单的尝试

index.html


<vxe-table border :data="tableData">
  <vxe-column type="seq" width="60"></vxe-column>
  <vxe-column field="name" title="Name">
    <template #default="{ row }">
      <span>自定义插槽模板 {{ row.name }}</span>
    </template>
  </vxe-column>
  <vxe-column field="sex" title="Sex"></vxe-column>
  <vxe-column field="age" title="Age"></vxe-column>
</vxe-table>

<vxe-grid v-bind="gridOptions">
  <template #name="{ row }">
    <span>自定义插槽模板 {{ row.name }}</span>
  </template>
</vxe-grid>

index.js

export default {
  name: 'vxe',
  template: '',
  setup () {
    const tableData = [
      { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },
      { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
      { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
      { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
    ]

    const gridOptions = {
      border: true,
      columns: [
        { type: 'seq', width: 50 },
        { field: 'name', title: 'Name', slots: { default: 'name' } },
        { field: 'sex', title: 'Sex', showHeaderOverflow: true },
        { field: 'address', title: 'Address', showOverflow: true }
      ],
      data: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
      ]
    }

    return {
      tableData,
      gridOptions
    }
  }
}