前言
在vue开发中使用element-ui的el-table时一般都需要进行封装以便于复用，提高开发效率，减少重复代码，这篇博客对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-ui
import 'element-ui/lib/theme-chalk/index.css' // 样式文件需要单独引入
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
二、封装功能
新建一个chris-el-table组件，遍历表头变量tableTitle使用v-for循环生成el-table-column，使用slot来实现自定义单元格：
三、样式覆盖
根据需要覆盖el-table的默认样式：
四、使用组件
直接传入表头数据tableTitle和表格数据tableData：
表头数据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进行修改：
查看
源码扔在最后：https://github.com/chrischen0405/element-component-in-vue
以上就是Element使用el-table组件二次封装的详细内容，更多关于Element el-table二次封装的资料请关注脚本之家其它相关文章！