VUE学习（四）el-table的替代品vxe-table使用

使用el-table加载数据量稍微大点，就会卡顿

搜索后发现vxe-table比较好用 

1.github地址

GitHub - x-extends/vxe-table: vxe-table vue 表格解决方案

使用说明

vxe-table v4

2.main.js 中加入

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

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

const app = createApp(App)

app.use(ElementPlus)
app.use(VXETable)

app.mount('#app')

//createApp(App).mount('#app')

3.使用方法

  <div>
    <vxe-table
          border height="400"  stripe
          :column-config="{resizable: true}"
          :row-config="{isHover: true}"
          :data="tableData">
          <vxe-column type="seq" width="60"></vxe-column>
          <vxe-column field="name" sortable title="Name" width="300"></vxe-column>
          <vxe-column field="sex" title="最小列宽" min-width="300"></vxe-column>
          <vxe-column field="age" title="Age" width="300"></vxe-column>
          <vxe-column field="time" title="Time" width="300"></vxe-column>
          <vxe-column field="address" title="Address" width="300" show-overflow></vxe-column>
        </vxe-table>
  </div>

4.table数据

<script >
export default{
  data(){
    return{
      name:"'aaaabbbb22'",
      tableData: [],
    }
  },

  methods:{
    changeName(){
      this.name='easyboot'
    },

    getTableData() {
      let cont = 0;
      let tableData = [];
      while (cont < 10000) {
        cont = cont + 1;
        let object = {
          name: "王小虎" + cont,
          sex: cont
        };
        tableData.push(object);
      }

      setTimeout(() => {
        this.tableData = tableData;
        // console.log(tableData,this.tableData[0].name)
      }, 0);
    }
  },
  created() {
    this.getTableData();
  }
}
</script >