数据表格优化

1.安装

npm install umy-ui

2.注册引入

import UmyUi from 'umy-ui'
import 'umy-ui/lib/theme-chalk/index.css'
Vue.use(UmyUi)

import {
  UTableColumn,
  UTable,
  UxGrid,
  UxTableColumn
} from 'umy-ui';

Vue.use(UxGrid)
Vue.use(UTable)
Vue.use(UxTableColumn)
Vue.use(UTableColumn)

3.实列模拟代码

 <ux-grid border
                    show-overflow
                    ref="plxTable"
                    :max-height="400"
                    :data="tableData"
                    :highlightCurrentRow="false"
                    :edit-config="{trigger: 'click', mode: 'row'}"
                    @select-all="selectAll">
                   <ux-table-column type="checkbox" width="60" fixed="left"></ux-table-column>
                   <ux-table-column type="index" width="80"></ux-table-column>
                   <ux-table-column field="name" title="名字" width="140" edit-render>
                     <template v-slot:edit="scope">
                       <el-input v-model="scope.row.name"></el-input>
                     </template>
                   </ux-table-column>
                   <ux-table-column field="age" title="年龄"  width="160" edit-render></ux-table-column>
                   <ux-table-column field="sex" title="性别" min-width="140" edit-render></ux-table-column>
            </ux-grid>

4.js数据代码

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tableData: [],
      columns: [],
    }
  },
  methods:{
     selectAll(slections){
       console.log(slections);
     }
  },
   mounted () {
           // 延迟加载
           this.tableData = Array.from({ length: 500 }, (_, idx) => ({
               id: idx + 1,
               date: '2016-05-03',
               name: '张三' + idx,
               sex: 'nan',
               age: 18 + idx
            }))
         },
}
</script>