Vue3整合VxeTable

VxeTable官网：https://gitee.com/xuliangzhan_admin/vxe-table

安装

npm install xe-utils vxe-table@next

main.ts中注册

import {createApp} from 'vue'
//vxe-table
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

const app = createApp(App)
app.use(VXETable)
app.mount('#app')

页面使用

  
    
      
      
      
      
    
  



import {ref} from 'vue'


export default {
  name: "Home",
  data() {
    let tableData = ref( [
      {
        id: 10001,
        name: "张三",
        sex: "男",
        address: "北京市"
      },
      {
        id: 10002,
        name: "李四",
        sex: "女",
        address: "上海市"
      },
      {
        id: 10003,
        name: "王五",
        sex: "男",
        address: "广州市"
      }
    ])
    return {
      tableData
    };
  }
};

页面效果