这篇文章主要讲解了“基于element-ui表格的二次封装怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“基于element-ui表格的二次封装怎么实现”吧！
在项目中经常会使用到element的表格，如果每次都cv,也确实有点麻烦，基于这个情况我对表格进行了二次封装
写一个Table组件
首先先写表格样式
<el-table :data="tableData" :header-cell- :height="height" :border="border" @selection-change="handleSelectionChange" > <el-table-column v-if='selection' type="selection" width="55"> </el-table-column> <el-table-column v-for="v in tableProp" :key="v.label" :prop="v.code" :sortable='v.sortable' :label="v.label" :width="v.width" > <template slot-scope="scope"> <div v-if='!v.code'> {{ scope.row[scope.column.property] }} </div> <div v-else> <slot name="row" :row="scope.row"></slot> </div> </template> <el-table-column v-for="(item, i) in v.data" :key="i" :sortable='item.sortable' align="center" :width="item.width" :prop="item.code" :label="item.label" > <template slot-scope="scope"> <div v-if='!v.code'> {{ scope.row[scope.column.property] }} </div> <div v-else> <slot name="row" :row="scope.row"></slot> </div> </template> </el-table-column> </el-table-column> <el-table-column label="操作" v-if='ishandle'> <template slot-scope="scope"> <slot name="edit" :row="scope.row" :index="scope.$index"></slot> </template> </el-table-column> </el-table>tableData为当前显示的数据，tableProp为表头的名称，可以为多级也可以为单级，区别为data是否存在，headerStyle为表头样式，height为表的高度，sortable以该列为基准的排序，border是否显示边框,handleSelectionChange多选，selection是否显示多选，ishandle是否显示操作，这里使用插槽进行写操作
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) } },};第二步加分页
<el-pagination :background='background' :layout="layout" :total="total" :page-size="pageSize" :current-page.sync="current" :page-sizes="pageSizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :hide-on-single-page='singlepage' > </el-pagination>background背景是否显示，layout组件布局，子组件名用逗号分隔，total总条数，pageSizes每页显示个数选择器的选项设置，current当前页码，pageSize每页显示条目个数，singlepage只有一页时是否隐藏,handleSizeChangepageSize 改变时会触发,handleCurrentChange改变时会触发
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页面
<Table :height="90" class="left-top-table" :tableData="tableIndex" :tableProp="tableProp" @handleCurrentChange='handleCurrentChange' @handleSizeChangepageSize ='handleSizeChangepageSize ' > <template slot="edit" slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.index, scope.row)" >编辑</el-button > </template> </Table>//pageSize 改变时会触发handleCurrentChange(val){....}// currentPage 改变时会触发handleSizeChangepageSize (val){....}// 编辑方法handleEdit(index,row){....}更多的可以根据自己项目的需求进行修改，这只是一个大概的项目雏形
感谢各位的阅读，以上就是“基于element-ui表格的二次封装怎么实现”的内容了，经过本文的学习后，相信大家对基于element-ui表格的二次封装怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
