element ui table自定义表头,
这篇文章主要为大家详细介绍了某视频剪辑软件元素实现表格多级表头，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件元素实现表格多级表头的具体代码，供大家参考，具体内容如下
table组件
模板
div class= table con id= table con
埃尔表
:data=dataSource
:height=tableHeight
垂直加载="加载"
显示溢出工具提示
ref=multipleTable
class=multipleTable
@ selection-change=选择更改
:key=key
！-表格多选框-
埃尔-表格-列
v-if=selectShow
type=selection
align=居中
/El-表格-列
！-表格单选框-
埃尔-表格-列
无线电秀！选择显示
模板槽-范围="范围"
El-radio v-model= radio val @ change。native= getRow(范围。row)/El-radio
/模板
/El-表格-列
！-序号-自定义序号列-
埃尔-表格-列
v-if=indexShow
type=index
align=居中
标签=序号
固定=左
:width=indexWidth
模板槽-范围="范围"
span{{(第一页)*大小范围index 1}}/span
/模板
/El-表格-列
！-表格数据列-
埃尔-表格-列
align=居中
表列中的v-for=(列，索引
:key=index
:label= cloumn.title
:prop=cloumn.prop
:show-overflow-tooltip= column。工具提示显示
！-表格枚举-
模板槽-范围="范围"
span v-if=列。prop=== status { { scope。划。状态=== 1 ？是:否} span
span v-else { { scope。行[列。prop]} }/span
/模板
！-二级表头-
模板列中的v-for=(columnChildren，I)。儿童
埃尔-表格-列
:key=i
:label=columnChildren.title
:prop=columnChildren.prop
:show-overflow-tooltip=列子级。工具提示显示
align=居中
模板槽-范围="范围"
！-二级表头枚举-
span v-if=列子项。prop=== exit { { scope。划。exit=== 1 ？是:否} span
span v-else { { scope。行[列]子级。prop] - } }/span
/模板
/El-表格-列
/模板
/El-表格-列
！-操作列-
埃尔-表格-列
v-if= tableoperdisplay
:width= tableOperaWidth
标签=操作
align=居中
固定=右
模板槽-范围="范围"
跨度
字体-小字体-颜色-光操作跨度
v-if= detailoperdisplay
@ click= detailOperaHandle(范围。行)
{{ tableOperationText1 }}
/span
/模板
/El-表格-列
/el-table
/div
/模板
脚本
从"时刻"导入时刻
导出默认值{
道具：{
数据源：{//表格数据
类型：数组，
默认值：()=([])
},
正在加载：{
类型：布尔型，
默认值：错误
},
选择显示：{//表格多选框
类型：布尔型，
默认值：错误
},
无线电显示：{//表格单选框
类型：布尔型，
默认值：错误
},
indexShow:{//序号列
类型：布尔型，
默认值：错误
},
页面：{
类型：数量，
默认值：1
},
大小：{
类型：数量，
默认值：10
},
索引宽度：{//序号列宽度
类型：字符串，
默认值："100"
},
表格列：{//表格数据列
类型：数组，
默认值：()=([])
},
tableoperdisplay:{//表格操作列
类型：布尔型，
默认值：错误
},
detailoperdisplay:{//操作列详情按钮
类型：布尔型，
默认值：错误
},
tableOperationText1:{
类型：字符串，
默认值：详情
}
},
已安装(){
},
data (){
返回{
关键：时刻()。格式( YYYY-MM-DD HH:mm:ss )，
表格高度："100%",
无线电值：""
}
},
方法：{
detailOperaHandle (rowVal){
//console.log(rowVal)
这个. emit(detailOperaHandle ，rowVal)
},
//表格多选框事件
选择更改(selectValArr){
//console.log(selectValArr)
这个. emit(selectValArr ，selectValArr)
},
getRow (selectRowObj){
console.log(selectRowObj)
这个emit(getRow ，selectRowObj)
}
}
}
/脚本
样式lang=scss 范围
#tableCon{
身高：100%;多重表格{
宽度：100%;
身高：100%;
溢出：自动；
}
}
/风格
在需要的页面引入
模板
div id=componentInfo
div class=tableCon
div class=tableArea
表格模块
:dataSource=tableDatas
:tableCloumns= cloumns
:loading=false
:indexShow=true/tableModule
/div
/div
/div
/模板
脚本
从" @/组件/公共表"导入表格模块
导出默认值{
组件：{
表格模块
},
道具：{
},
data (){
返回{
表数据：[
{姓名：小花，性：女，年龄： 19 ,状态： 1 ,学校1:1 ,学校2:2 ,出口： 1},
{姓名：小朵，性：女，年龄： 19 ,状态： 0 ,学校1:1 ,学校2:2 ,退出： 0},
{姓名：小花朵，性：女，年龄： 19 ,状态： 1 ,学校1:1 ,学校2:2 ,出口： 1}],
专栏：[
{
标题：姓名，
道具："名称"
},
{
道具："性",
标题：性别
},
{
道具："年龄",
标题：年龄
},
{
属性："状态",
标题：是否在线
},
{
道具："学校",
标题：学校，
儿童：[
{
道具："学校1",
标题：学校1
},
{
道具："学校2",
标题：学校2
},
{
道具："退出",
标题：存在
}
]
}
]
}
}
}
/脚本
样式lang=scss 范围
#componentInfo{
宽度：100%;
身高：100%;
背景色：# fff
填充：10px。表格图标{
宽度：100%;
身高：100%;表区域{
宽度：100%;
身高：100%;
}
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。