vue3 使用vxe-table

在Vue3中使用vxe-table，你需要先在main.js中导入vxe-table的相关依赖并注册组件。可以按照以下步骤进行操作：

1. 首先，使用import语句导入vxe-table和相关样式文件。

   import VXETable from 'vxe-table'
   import 'vxe-table/lib/style.css'

2. 然后，在Vue应用实例中使用app.use()方法来注册vxe-table插件。

   const app = createApp(App)
   app.use(VXETable)

3. 在你的组件中，可以像使用其他Vue组件一样使用vxe-table。例如，你可以在模板中使用`<vxe-table>`标签来展示表格，使用`<vxe-table-column>`标签来定义列。同时，你需要将数据传递给表格组件。

   <vxe-table :data="demo1.tableData">
     <vxe-table-column type="seq" title="Seq" width="60"></vxe-table-column>
     <vxe-table-column field="name" title="Name"></vxe-table-column>
     <vxe-table-column field="role" title="Role"></vxe-table-column>
     <vxe-table-column field="sex" title="Sex"></vxe-table-column>
     <vxe-table-column field="address" title="Address"></vxe-table-column>
   </vxe-table>

4. 最后，你需要在组件的data选项中定义表格的数据。

   const demo1 = reactive({
     tableData: [
       { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
       { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
       { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
     ]
   })

这样，你就可以在Vue3中使用vxe-table了。