一、前言
这两天设计师给了一个table表格的原图,如下图:
PS:注意看红色圈起来的,表头“项目名称” 需要横跨2列
因为项目使用的是elementui的框架,表格用el-table已经渲染完成。居然在表头设置跨列的时候栽了跟头。
翻了官方文档,也没看到哪个属性跟方法与之相关;多少有点关系的就是多表头设置,可惜不符合。文档看不出来什么,只能靠度娘了,搜了半天全是与多表头相关的,最后看到了一篇操作dom元素的,才有了灵感。
二、代码奉上
<el-table
v-loading="tableLoading"
element-loading-background="rgba(40,43,50, 0)"
:data="tableData"
border
:header-cell-class-name="theadSpan"
>
<template slot="empty">
<p>{{ tabelEmpty }}</p>
</template>
<el-table-column
v-for="col in columns"
:key="col.id"
:prop="col.id"
:label="col.label"
:min-width="col.width"
/>
</el-table>
PS:
- 在data定义了columns变量存放表头数据
- 给table设置了header-cell-class-name属性,并通过theadSpan方法返回className(重点:这里跟表头跨列的有联系,可以往后看,有代码!!!!!!!!)
1.columns变量示例
data() {
return {
columns: [
{
id: 'name',
label: '项目名称',
width: '100'
},
{
id: 'code',
label: '项目编码',
width: '100'
},
{
id: 'orgName',
label: '组织',
width: '100'
},
{
id: 'attributeName',
label: '项目属性',
width: '100'
},
{
id: 'online',
label: '是否上线',
width: '100'
},
{
id: 'comment',
label: '备注',
width: '100'
}
]
}
}
2.表头跨列实现(PS:重点!重点!重点!)
- 在method定义theadSpan方法
- dom渲染完成之后 执行setColSpan方法
mounted() {
// dom渲染完成后 操作表头合并
this.$nextTick(() => {
this.setColSpan()
})
},
methods: {
setColSpan() {
var x = document.querySelector('.colSpan')
var x1 = document.querySelector('.hideTh')
// 将第一列表头单元格的colSpan设为2
x.colSpan = 2
// 将第二列表头单元格的隐藏
x1.style.display = 'none'
},
// 给第一列、第二列表头 返回 相应class
theadSpan({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
// 给第一列表头的dom添加class='colSpan'
if (columnIndex === 0) {
return 'colSpan'
}
// 给第二列表头的dom添加class='hideTh'
if (columnIndex === 1) {
return 'hideTh'
}
}
}
}
不重要的吐槽:
这样看,代码的确没多少就实现了功能,就是逼不得已,还需要操作dom元素才能完成。
总结
Element中table表格如何让表头跨列实现完成了,如果有其他方法,可以共享,相互学习~~~~