这篇文章主要讲解了“Element怎么使用el-table组件实现二次封装”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Element怎么使用el-table组件实现二次封装”吧！
一、安装引入
Element官方文档
npm安装element-ui：
npm i element-ui -S可以看文档按需引入，这里为了方便直接全局引入了：
import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import ElementUI from 'element-ui' // 全局引入element-uiimport 'element-ui/lib/theme-chalk/index.css' // 样式文件需要单独引入Vue.config.productionTip = falseVue.use(ElementUI)new Vue({ router, store, render: h => h(App)}).$mount('#app')二、封装功能
新建一个chris-el-table组件，遍历表头变量tableTitle使用v-for循环生成el-table-column，使用slot来实现自定义单元格：
<template> <div class="table-container"> <el-table :data="tableData" width="100%" :row-class-name="rowClassName" :height="height" :row-> <template v-for="(item, index) in tableTitle"> <slot v-if="item.slot" :name="item.slot"></slot> <el-table-column v-else :key="index" :prop="item.property" :label="item.label" :min-width="item.minWidth ? item.minWidth : ''" :width="item.width ? item.width : ''"> </el-table-column> </template> </el-table> </div></template><script>export default { name: 'chris-el-table', props: { tableData: { // 表格数据 type: Array, default: () => { return [] } }, tableTitle: { // 表格头标题 type: Array, require: true }, height: { // 表格高度 type: [Number, String], default: '100%' }, rowHeight: { // 表格行高 type: [Number, String], default: 44 } }, data () { return {} }, methods: { rowClassName (e) { return e.rowIndex % 2 === 0 ? '' : 'light-line' } }}</script>三、样式覆盖
根据需要覆盖el-table的默认样式：
<style scoped lang="scss">.table-container { /deep/ .el-table { background-color: transparent; &::before { // 表格底部边框 background: none; } tbody tr:hover > td { // 表格触碰样式 background-color: #F5F7FA; } } /deep/ .el-table__header-wrapper { .el-table__cell { // 表头样式 height: 44px; padding: 0; background: #FFFFFF; border-bottom: #EBEEF5 solid 1px !important; text-align: center; } } /deep/ .el-table__body-wrapper { &::-webkit-scrollbar { // 表格滚动条 width: 0 !important; } .el-table__row { // 表格行样式 background-color: #F5F7FA; .el-table__cell { padding: 0; text-align: center; border-bottom: #EBEEF5 solid 1px !important; } } .light-line { // 高亮行颜色 background-color: #FFFFFF; } }}</style>四、使用组件
直接传入表头数据tableTitle和表格数据tableData：
<chris-el-table :table-title="tableTitle" :table-data="tableData"></chris-el-table>表头数据tableTitle大概是这样：
tableTitle: [ { label: '日期', property: 'date' }, { label: '姓名', property: 'name' }, { label: '地址', property: 'address' }, { slot: 'handle' } ]表格数据tableData对应property，大概长这样：
tableData: [ { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' } ]需要自定义的单元格使用slot，对el-table-column进行修改：
<chris-el-table :table-title="tableTitle" :table-data="tableData"> <el-table-column slot="handle" label="操作"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)">查看</el-button> </template> </el-table-column> </chris-el-table>感谢各位的阅读，以上就是“Element怎么使用el-table组件实现二次封装”的内容了，经过本文的学习后，相信大家对Element怎么使用el-table组件实现二次封装这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
