一、案例：表头（二级表头）合并、首列数据相同合并
效果图：
1、表头第1、2列合并
第一种写法（普通表头）：
ref="main" :data="tableData" border :header-cell-style="headerStyle" style="width: 100%;"> methods: { headerStyle({ row, column, rowIndex, columnIndex }) { const comStyle = { backgroundColor: "#4095e5", color: "#fff", fontSize: "500", }; if (rowIndex === 0) { row[0].colSpan = 0; // 将表头第一列和第二列合并，内容展示为第二列的内容 row[1].colSpan = 2; if (columnIndex === 0) { // 将表头第一列隐藏 return { display: "none", ...comStyle, }; } } return comStyle; }, } 第2种写法（二级表头）： ref="main" :data="tableData" border :header-cell-style="headerStyle" style="width: 100%;"> headerStyle({ row, column, rowIndex, columnIndex }) { const comStyle = { backgroundColor: "#4095e5", color: "#fff", fontSize: "500", }; // 1.1 让第0行的第0列跨2行 if (rowIndex === 0 && columnIndex === 0) { this.$nextTick(() => { document .getElementsByClassName(column.id)[0] .setAttribute("rowSpan", 2); return comStyle; }); } // 1.2 被覆盖的进行隐藏 if (rowIndex === 1 && (columnIndex == 0 || columnIndex == 1)) { return { display: "none", ...comStyle, }; } return comStyle; }, 2、行根据某字段内容一致的进行合并 给表格增加属性:span-method="spanMethod" spanMethod({ row, column, rowIndex, columnIndex }) { // console.log('row', row, 'column', column, 'rowIndex', rowIndex, 'columnIndex', columnIndex); //定义需要合并的列字段，有哪些列需要合并，就自定义添加字段即可 const fields = ['nj'] // 当前行的数据 const cellValue = row[column.property] if (rowIndex == 0) { // 实现表头下面第一行数据，第一列合计展示时2列合并 if (columnIndex === 0) { return {rowspan: 1, colspan: 0} // 隐藏表头下面第一行的第一列 } if (columnIndex === 1) { return {rowspan: 1, colspan: 2} // 将表头下面第一行的第一列和第二列合并 } } // 判断只合并定义字段的列数据 if (cellValue && fields.includes(column.property)) { const prevRow = this.tableData[rowIndex - 1] //上一行数据 let nextRow = this.tableData[rowIndex + 1] //下一行数据 // 当上一行的数据等于当前行数据时，当前行单元格隐藏 if (prevRow && prevRow[column.property] === cellValue) { return { rowspan: 0, colspan: 0 } } else { // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格 let countRowspan = 1 //用于合并计数多少单元格 while (nextRow && nextRow[column.property] === cellValue) { nextRow = this.tableData[++countRowspan + rowIndex] } if (countRowspan > 1) { return { rowspan: countRowspan, colspan: 1 } } } } }, 3、完整示例代码 ref="main" :data="tableData" border :header-cell-style="headerStyle" :span-method="spanMethod" style="width: 100%;"> v-for="item in colunms1" :key="'姓名_' + item.name" :label="item.name" :label-class-name="'more-header'" align="center"> v-for="citem in item.children" :key="'姓名_' + item.name + citem.name" :label="citem.name" :prop="citem.prop" :label-class-name="'more-header'" align="center"/> v-for="item in colunms2" :key="'地址_' + item.name" :label="item.name" :label-class-name="'more-header'" align="center"> v-for="citem in item.children" :key="'地址_' + item.name + citem.name" :label="citem.name" :prop="citem.prop" :label-class-name="'more-header'" align="center"/> v-for="item in colunms3" :key="'排名_' + item.name" :label="item.name" :label-class-name="'more-header'" align="center"> v-for="citem in item.children" :key="'排名_' + item.name + citem.name" :label="citem.name" :prop="citem.prop" :label-class-name="'more-header'" align="center"/> 二、案例：表头合并（二级表头）、首列数据相同合并、最后一列根据首列字段相同合并行 效果图： 2.1 实现代码 ref="overTargetDetailsTable2222" :data="tableData2" border :header-cell-style="spanHeader2" :span-method="spanMethod2"> data() { return { tableData2: [ { city: '上海', region: '普陀', name: '张三', sex: '女', age: '22', height: '162', weight: '100', like: '打游戏', }, { city: '上海', region: '黄埔', name: '张三2', sex: '男', age: '23', height: '172', weight: '140', like: '', }, { city: '上海', region: '徐汇', name: '张三3', sex: '女', age: '25', height: '162', weight: '100', like: '', }, { city: '陕西', region: '西安', name: 'A', sex: '女', age: '25', height: '162', weight: '100', like: '跳舞', }, { city: '江苏', region: '南京', name: '李四', sex: '男', age: '22', height: '162', weight: '130', like: '打篮球', }, { city: '江苏', region: '苏州', name: '李四2', sex: '女', age: '20', height: '162', weight: '90', like: '', }, { city: '江苏', region: '无锡', name: '李四3', sex: '男', age: '28', height: '182', weight: '150', like: '', }, { city: '浙江', region: '杭州', name: '王五', sex: '女', age: '19', height: '162', weight: '130', like: '唱歌', }, { city: '浙江', region: '宁波', name: '王五2', sex: '男', age: '29', height: '170', weight: '170', like: '', }, { city: '浙江', region: '嘉兴', name: '王五3', sex: '女', age: '19', height: '162', weight: '130', like: '', }, ], } } /** 表头合并控制 */ spanHeader2({ row, column, rowIndex, columnIndex }) { let comStyle = {}; // 1.1 让第0行的第0列跨2行 if (rowIndex === 0) { row[0].colSpan = 0; // 将表头第一列和第二列合并，内容展示为第二列的内容 row[1].colSpan = 2; if (columnIndex === 0) { // 将表头第一列隐藏 return { display: "none", }; } } return comStyle; }, /** 合并行、列 */ spanMethod2({ row, column, rowIndex, columnIndex }) { // console.log('row', row, 'column', column, 'rowIndex', rowIndex, 'columnIndex', columnIndex); if (columnIndex === 0) { //定义需要合并的列字段，有哪些列需要合并，就自定义添加字段即可 const fields = ['city'] // 当前行的数据 const cellValue = row[column.property] let countRowspan = 1 //用于合并计数多少单元格 // 判断只合并定义字段的列数据 if (cellValue && fields.includes(column.property)) { const prevRow = this.tableData2[rowIndex - 1] //上一行数据 let nextRow = this.tableData2[rowIndex + 1] //下一行数据 // 当上一行的数据等于当前行数据时，当前行单元格隐藏 if (prevRow && prevRow[column.property] === cellValue) { return { rowspan: 0, colspan: 0 } } else { // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格 let countRowspan = 1 //用于合并计数多少单元格 while (nextRow && nextRow[column.property] === cellValue) { nextRow = this.tableData2[++countRowspan + rowIndex] } if (countRowspan > 1) { return { rowspan: countRowspan, colspan: 1 } } } } } if (columnIndex === 7) { const prevRow2 = this.tableData2[rowIndex - 1] //上一行数据 let nextRow2 = this.tableData2[rowIndex + 1] //下一行数据 // 当上一行的数据等于当前行数据时，当前行单元格隐藏 if (prevRow2 && prevRow2.city === row.city) { return { rowspan: 0, colspan: 0 } } else { // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格 let countRowspan2 = 1 //用于合并计数多少单元格 while (nextRow2 && nextRow2.city === row.city) { nextRow2 = this.tableData2[++countRowspan2 + rowIndex] } if (countRowspan2 > 1) { return { rowspan: countRowspan2, colspan: 1 } } } } }, 参考文章
您阅读本篇文章共花了：
发表评论