基于element-ui表格的二次封装怎么实现

这篇文章主要讲解了“基于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表格的二次封装怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！