elementui table二次封装,el-table合并单元格封装
这篇文章主要为大家介绍了元素使用埃尔表组件二次封装示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
目录
前言一、安装引入二、封装功能三、样式覆盖四、使用组件
前言
在某视频剪辑软件开发中使用元素-用户界面的埃尔表时一般都需要进行封装以便于复用，提高开发效率，减少重复代码，这篇博客对埃尔表进行简单的二次封装：
一、安装引入
元素官方文档
新公共管理安装元素-用户界面：
国家预防机制一元素-ui -S
可以看文档按需引入，这里为了方便直接全局引入了：
从“vue”导入某视频剪辑软件
从导入应用程序 App.vue
从导入路由器。/路由器
从导入存储。/商店
从" ElementUI导入ElementUI全局引入元素-用户界面
“导入”元素-ui/lib/theme-chalk/index。CSS //样式文件需要单独引入
Vue.config.productionTip=false
Vue.use(ElementUI)
新Vue({
路由器，
店，
render:h=gt；h(应用程序)
}).$ mount("# app ")
二、封装功能
新建一个克里斯艾尔表组件，遍历表头变量表格标题使用迭代循环生成埃尔-表格-列，使用狭槽来实现自定义单元格：
模板
div class=表格容器
埃尔表
:data=tableData
宽度=100%
:row-class-name=rowClassName
:height=height
:row-style= { height:` $ { row height } px ` }
表格标题中的模板v-for=(项目，索引)
槽v-if= item。 slot :name= item。插槽/插槽
埃尔-表格-列
五-否则
:key=index
:prop=item.property
:label=item.label
:min-width=item.minWidth？item.minWidth:
:width=item.width？item.width:" "
/El-表格-列
/模板
/el-table
/div
/模板
脚本
导出默认值{
名称："克里斯艾尔表",
道具：{
tableData: { //表格数据
类型：数组，
默认值：()={
return []
}
},
表格标题：{ //表格头标题
类型：数组，
要求：真
},
高度：{ //表格高度
类型：[数字，字符串],
默认值："100%"
},
行高：{ //表格行高
类型：[数字，字符串],
默认值：44
}
},
data () {
返回{}
},
方法：{
rowClassName (e) {
return e.rowIndex % 2===0？:光线
}
}
}
/脚本
三、样式覆盖
根据需要覆盖埃尔表的默认样式：
样式范围的语言=scss 。表-容器{
/深/。埃尔表{
背景色：透明；
*在{ //之前表格底部边框
背景：无；
}
tbody tr:hover td { //表格触碰样式
背景色：# f5f 7 fa
}
}
/深/。埃尔-表格_ _标题-包装器{。el-table__cell { //表头样式
身高：44px
填充：0;
背景：# FFFFFF
border-bottom: #EBEEF5 solid 1px！重要；
文本对齐：居中；
}
}
/深/。el-table__body-wrapper {
:-webkit-scrollbar { //表格滚动条
宽度：0!重要；
}。el-table__row { //表格行样式
背景色：# f5f 7 fa。el-table__cell {
填充：0;
文本对齐：居中；
border-bottom: #EBEEF5 solid 1px！重要；
}
}。浅色线{ //高亮行颜色
背景色：# FFFFFF
}
}
}
/风格
四、使用组件
直接传入表头数据表格标题和表格数据表格数据：
克里斯艾尔表
:table-title=tableTitle
：表数据=表数据
/克里斯-埃尔-表
表头数据表格标题大概是这样：
表格标题：[
{
标签: 日期，
属性："日期"
},
{
标签: 姓名，
属性："名称"
},
{
标签: 地址，
属性："地址"
},
{
插槽："句柄"
}
]
表格数据列表数据对应财产，大概长这样：
表格数据：[
{
日期："2016年5月2日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1518 弄
},
{
日期："2016年5月四日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1517 弄
},
{
日期："2016年5月一日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1519 弄
},
{
日期："2016年5月3日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1516 弄
}
]
需要自定义的单元格使用槽，对埃尔-表格-列进行修改：
克里斯艾尔表
:table-title=tableTitle
：表数据=表数据
El-table-column slot= handle label=操作
模板槽-范围="范围"
El-button @ click= handle click(范围。行)查看/el-button
/模板
/El-表格-列
/克里斯-埃尔-表
源码扔在最后：https://github。com/Chris Chen 0405/element-component-in-vue
以上就是元素使用埃尔表组件二次封装的详细内容，更多关于元素埃尔-表二次封装的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。