这篇文章主要讲解了“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-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来实现自定义单元格：
<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组件实现二次封装这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
