在项目中经常会使用到element的表格，如果每次都cv,也确实有点麻烦，基于这个情况我对表格进行了二次封装 ## 写一个Table组件 ### 首先先写表格样式 ```html

// tableData为当前显示的数据，tableProp为表头的名称，可以为多级也可以为单级，区别为data是否存在，headerStyle为表头样式，height为表的高度，sortable以该列为基准的排序，border是否显示边框,handleSelectionChange多选，selection是否显示多选，ishandle是否显示操作，这里使用插槽进行写操作 ``` ```javascript export default { props: { height: { type: Number, default: 220, }, ishandle:{ type: Boolean, default: false, }, border:{ type: Boolean, default: false, }, tableProp: { type: Array, default: () => [ { code: 'index', label: '指标', width: 100, }, { code: 'PAC', label: 'PAC', width: 120, data:{ code: 'PAB', label: 'PAB', width: 60, } }, { code: 'PAM', label: 'PAM', width: 60, code:true, }, { code: 'POWER_CONSUMPTION', label: '综合电耗(kW·h)', width: 50, }, { code: 'WATER_CONSUMPTION', label: '自用水率(%)', }, ], }, tableData: { type: Array, default:() => [ { index:1, PAC:'1' PAM:'1', POWER_CONSUMPTION:'1', WATER_CONSUMPTION:'1' } ] }, Style:{ type:String, default:'font-size: 12px;padding:0;line-height: inherit;font-weight: 500;color: #6A7474;' } }, data() { return { show: false, }; }, methods: { // 样式 headerStyle() { return this.Style; }, // 多选 handleSelectionChange(val){ this.$emit('SelectionChange',val) } }, }; ``` ### 第二步加分页 ```html // background背景是否显示，layout组件布局，子组件名用逗号分隔，total总条数，pageSizes每页显示个数选择器的选项设置，current当前页码，pageSize每页显示条目个数，singlepage只有一页时是否隐藏,handleSizeChangepageSize 改变时会触发,handleCurrentChange改变时会触发 ``` ```javascript export default { props: { background: { type: Boolean, default: false, }, layout:{ type: String, default: 'total, sizes, prev, pager, next, jumper', }, total:{ type: Number, default: 100, }, pageSize:{ type: Number, default: 10, }, pageSizes:{ type: Array, default: () => [10, 20, 30, 40, 50, 100], }, singlepage: { type: Boolean, default: false, }, current:{ type: Number, default: 1, }, }, methods: { // pageSize 改变时会触发 handleSizeChangepageSize (val) { this.$emit('handleSizeChangepageSize ',val) }, // currentPage 改变时会触发 handleCurrentChange(val){ this.$emit('handleCurrentChange',val) } }, }; ``` ## 在页面中使用 ### 先引入Table.vue页面 ```html

``` ```javascript //pageSize 改变时会触发 handleCurrentChange(val){ .... } // currentPage 改变时会触发 handleSizeChangepageSize (val){ .... } // 编辑方法 handleEdit(index,row){ .... } ``` 更多的可以根据自己项目的需求进行修改，这只是一个大概的项目雏形