对el-table表格的表头操作-编程知识

效果1：单层表头合并

图示1：

说明：

header-cell-style函数用于给表头添加样式，其返回的值会被添加到表头对应样式中去
注意函数的形参中的column.id为单元格的class类
大家最好打印一下，结合审查dom看类名

代码：

<template><el-table:data="tableData"borderstyle="width: 600":header-cell-style="headerCellStyle"><el-table-columnprop="name"label="姓名、年龄、家乡"width="150"align="center"></el-table-column><el-table-columnprop="age"label="年龄"width="150"align="center"></el-table-column><el-table-columnprop="home"label="家乡"width="150"align="center"></el-table-column><el-table-columnprop="hobby"label="爱好"width="150"align="center"></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{name: "孙悟空",age: 500,home: "花果山水帘洞",hobby: "大闹天宫",},{name: "猪八戒",age: 88,home: "高老庄",hobby: "吃包子",},{name: "沙和尚",age: 1000,home: "通天河",hobby: "游泳",},{name: "唐僧",age: 99999,home: "东土大唐",hobby: "取西经",},],};},methods: {headerCellStyle({ row, column, rowIndex, columnIndex }) {// 第一步：设置表头的第0列暂不操作，将地1列和第2列隐去使其消失if ((columnIndex == 1) | (columnIndex == 2)) {return { display: "none" };}// 第二步， 由于1、2列没有了，后续列就会贴上来（后续列往左错位问题）if ((rowIndex == 0) & (columnIndex == 0)) {// 解决后续列错位问题，就是将隐去的第1、2列的位置再补上，通过第0列来补this.$nextTick(() => {// 原来第0列只占据一个位置，现在要去占据三个位置。即占据三列，即设置为横向三个单元格document.querySelector(`.${column.id}`).setAttribute("colspan", "3");// 这里的column.id实际是dom元素的class，故用点.不用井#，可审查dom验证// 通过设置原生的colspan属性，让原来的第一列只占据一个单元格的表头占据3个单元格即可});}},},
};
</script><style lang="less">
.el-table {th {font-weight: bold;color: #333;}
}
</style>

看，基本上一样的用法：先隐藏再设置横跨竖跨单元格

colspan='number' 属性，设置单元格可以横跨几列（默认一个单元格横向只占据一列）

图示2：

代码：

headerCellStyle({ row, column, rowIndex, columnIndex }) {// 第一步：隐去第2列单元格if (columnIndex == 2) {return { display: "none" };}// 第二步，让第1列单元格横跨两列（默认单元格只是横跨一列）if ((rowIndex == 0) & (columnIndex == 1)) {this.$nextTick(() => {document.querySelector(`.${column.id}`).setAttribute("colspan", "2");});}
},

图示3：

代码：

headerCellStyle({ row, column, rowIndex, columnIndex }) {// 第一步：隐去第3列单元格if (columnIndex == 3) {return { display: "none" };}// 第二步，让第2列单元格横跨两列（默认单元格只是横跨一列）if ((rowIndex == 0) & (columnIndex == 2)) {this.$nextTick(() => {document.querySelector(`.${column.id}`).setAttribute("colspan", "2");});}
},

图示4：

代码：

headerCellStyle({ row, column, rowIndex, columnIndex }) {// 第一步：隐去第1、2、3列单元格let hideColArr = [1, 2, 3];if (hideColArr.includes(columnIndex)) {return { display: "none" };}// 第二步，让第0列单元格横跨四列（默认单元格只是横跨一列）if ((rowIndex == 0) & (columnIndex == 0)) {this.$nextTick(() => {document.querySelector(`.${column.id}`).setAttribute("colspan", "4");});}
},

效果2：el-table多级表头合并

图示1：

说明：

多级表头，需要进一步通过rowIndex去找到对应的单元格
因为单层表头，表头只有1行，rowIndex肯定是0，所以写不写都无所谓
但是多级表头有不少行，所以需要使用 columnIndex，rowIndex 进一步定位单元格
类似于通过X轴 Y轴的坐标定位到某个单元格位置

代码：

html部分需要el-table-column标签进行嵌套

<template><el-table:data="tableData"borderstyle="width: 600":header-cell-style="headerCellStyle"><el-table-column prop="name" label="姓名" width="150" align="center"><el-table-columnprop="name"label="三列基础信息"width="150"align="center"></el-table-column></el-table-column><el-table-column prop="name" label="年龄" width="150" align="center"><el-table-columnprop="age"label="年龄"width="150"align="center"></el-table-column></el-table-column><el-table-column prop="name" label="家乡" width="150" align="center"><el-table-columnprop="home"label="家乡"width="150"align="center"></el-table-column></el-table-column><el-table-columnprop="hobby"label="爱好"width="150"align="center"></el-table-column></el-table>
</template>

js部分：

headerCellStyle({ row, column, rowIndex, columnIndex }) {// 把第1列第1行和第2列第1行的单元格隐去if ((columnIndex == 1) | (columnIndex == 2)) {if (rowIndex == 1) { // 加上rowIndex精准定位return { display: "none" };}}// 然后让第0列第1行的单元格横向占据3个单元格位置填充刚刚隐去导致的空白if ((columnIndex == 0) & (rowIndex == 1)) { // 加上rowIndex精准定位this.$nextTick(() => {document.querySelector(`.${column.id}`).setAttribute("colspan", "3");});}
},

图示2：

代码：

html部分

<template><el-table:data="tableData"borderstyle="width: 600":header-cell-style="headerCellStyle"><el-table-columnprop="name"label="基本信息（姓名、年龄、家乡）"align="center"></el-table-column><el-table-columnprop="age"label="年龄"align="center"></el-table-column><el-table-columnprop="home"label="家乡"align="center"></el-table-column><el-table-column prop="kind" label="所属种族" align="center"></el-table-column><el-table-column label="重要信息" align="center"><el-table-column label="公开重要信息" align="center"><el-table-column prop="nickname" label="法号" align="center"></el-table-column><el-table-column prop="hobby" label="爱好&性格" align="center"></el-table-column><el-table-column prop="personality" label="性格" align="center"></el-table-column></el-table-column><el-table-column label="保密重要信息" align="center"><el-table-column prop="bornBackground" label="出身背景" align="center"></el-table-column><el-table-column prop="skill" label="技能" align="center"></el-table-column></el-table-column></el-table-column></el-table>
</template>

js部分：

<script>
export default {data() {return {tableData: [{name: "孙悟空",age: 500,home: "花果山水帘洞",kind: "monkey",nickname: "斗战胜佛",hobby: "大闹天宫",personality: "勇敢坚韧、疾恶如仇",bornBackground: "仙石孕育而生",skill: "72变、筋斗云",},{name: "猪八戒",age: 88,home: "高老庄",kind: "pig",nickname: "净坛使者",hobby: "吃包子",personality: "好吃懒做、贪图女色",bornBackground: "天蓬元帅错投猪胎",skill: "36变",},{name: "沙和尚",age: 1000,home: "通天河",kind: "human",nickname: "金身罗汉",hobby: "游泳",personality: "憨厚老实、任劳任怨",bornBackground: "卷帘大将被贬下界",skill: "18变",},{name: "唐僧",age: 99999,home: "东土大唐",kind: "human",nickname: "檀功德佛",hobby: "取西经",personality: "谦恭儒雅、愚善固执",bornBackground: "金蝉子转世",skill: "念紧箍咒",},],};},methods: {headerCellStyle({ row, column, rowIndex, columnIndex }) {/*** 合并：基本信息（姓名、年龄、家乡）单元格【通过行与列的索引来合并】* */let colArr = [1, 2];if (colArr.includes(columnIndex)) {if (rowIndex == 0) {// 把第1列第0行和第2列第0行的单元格隐去return { display: "none" };}}if ((columnIndex == 0) & (rowIndex == 0)) {// 把第0列第0行的单元格横向延伸，补上刚刚隐去的单元格位置，并上个色this.$nextTick(() => {document.querySelector(`.${column.id}`).setAttribute("colspan", "3");});return { background: "pink" };}/*** 合并：重要信息--->公开重要信息--->爱好性格单元格 【通过单元格的文字内容来合并】* */if (column.label == "性格") {return { display: "none" };}if (column.label == "爱好&性格") {this.$nextTick(() => {document.querySelector(`.${column.id}`).setAttribute("colspan", "2");});return { background: "orange" }; // 不加这个也行，加了只是为了更好区分}/*** 重要！重要！重要！*    我们想要合并表头的单元格，需要先找到对应单元格*    可以通过列column对象的label或者行与列索引来找到，找到以后进行隐藏或合并*    也可以遍历行row数组找，不过会麻烦一些，个人建议通过column来找* */// 通过column找if (column.label == "技能") {return { background: "#baf" };}// 通过row找for (const item of row) {if (item.label == "重要信息") {this.$nextTick(() => {document.querySelector(`.${item.id}`).style.background = "#ea66a6";});break;}}},},
};
</script>

还可以，直接通过column.label找到对应单元格，然后进行合并单元格操作，不使用rowIndex和columnIndex了
这种方式，在某些情况下，会更加方便
但无论哪种方式，本质思路都是先找到单元格，再进行合并相关操作

headerCellStyle({ row, column, rowIndex, columnIndex }) {// 第一部分的合并if (column.label == "年龄") {return { display: "none" };}if (column.label == "家乡") {return { display: "none" };}if (column.label == "基本信息（姓名、年龄、家乡）") {this.$nextTick(() => {document.querySelector(`.${column.id}`).setAttribute("colspan", "3");});return { background: "pink" };}// 第二部分的合并if (column.label == "性格") {return { display: "none" };}if (column.label == "爱好&性格") {this.$nextTick(() => {document.querySelector(`.${column.id}`).setAttribute("colspan", "2");});return { background: "orange" };}
},