element table 合并单元格

抑郁使你厌倦世界，理智使你苟延残喘

template

<template><div><div class="panel"><el-table :data="tableData" :span-method="objectSpanMethod" border><el-table-column prop="name" label="部门品线" width="160"></el-table-column><el-table-column prop="campaignName" label="波次名称"></el-table-column><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="type" label="资源类型"></el-table-column><el-table-column prop="shareStatus" label="共享状态"></el-table-column><el-table-column prop="frequencyStr" label="频次"></el-table-column><el-table-column prop="impression" label="曝光"></el-table-column><el-table-column prop="impressionPercent" label="曝光占比"></el-table-column><el-table-column prop="excBeforeKpi" label="下降比例KPI"></el-table-column><el-table-column prop="ExcAbsKpi" label="下降绝对值KPI"></el-table-column></el-table></div></div>
</template>

解释

 rowspan（）这个函数就是用来返回 spanArr 数组的，
定义每一行的 rowspan
if( index === 0)，第一行，直接先给数组 push 进一个1，表示自己先占一行，
position 是数组元素的位置 （此时是从数组元素的第一个开始，所以position 为 0）， position为 0 意思表示的就是数组的第一个元素。当到了 index 为 2 的时候，if(this.listData[index][spanName] === this.listData[index-1][spanName])，
让第二行与第一行作比较：
（1）如果第二行与第一行相等的话，position 就 +1，当有 n 行第一行相同，position 就为 n，表示向下合并 n 行；
第二行自己就 spanArr.push(0)，表示第二行“消失”，因为第一行和第二行合并了；
（2）如果第二行与第一行不相等的话，那么 spanArr.push(1);就让第二行自己独占一行；
position = index ：把指针拿到 index 这行来，表示设置数组 spanArr[position] 的元素值，然后定义从此行开始向下合并几行
（可以根据示例研究下，当 index 为 2 时，position 为 2，当 index 为 3 时，第四行与第三行需要合并，
那么在数组的 position 元素就要 +1 了，也就是 spanArr[position] += 1）

:span-method="objectSpanMethod" 这个是官方给定的绑定属性和对应的方法，objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
row: 当前行
column: 当前列
rowIndex：当前行号
columnIndex ：当前列号该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表 colspan。
也可以返回一个键名为 rowspan 和 colspan 的对象。const _col = _row > 0 ? 1 : 0;  定义的这个单元格列的合并，我们项目只合并行，不合并列；_row：代表合并行的行数，_row 的值要么是 1，或者更大的自然正整数，要么是 0。
1代表：独占一行
更大的自然数：代表合并了若干行
0：代表“消失”的哪那一个单元格，后面的单元格向前推一格

<script>export default {data() {return {testArr1: [],testArr2: [],testArr3: [],testArr4: [],testArr5: [],testArr6: [],testArr7: [],testPosition1: 0,testPosition2: 0,testPosition3: 0,testPosition4: 0,testPosition5: 0,testPosition6: 0,testPosition7: 0,tableData: [{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"1-123122","impression":444,"impressionPercent":"100.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"123123+","impression":0,"impressionPercent":"0.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"1-123122","impression":888,"impressionPercent":"100.00%","shareStatus":"共享后","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"123123+","impression":0,"impressionPercent":"0.00%","shareStatus":"共享后","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"pc"},{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"1-123122","impression":444,"impressionPercent":"100.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"移动"},{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"123123+","impression":0,"impressionPercent":"0.00%","shareStatus":"共享前","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"移动"},{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"1-123122","impression":333,"impressionPercent":"100.00%","shareStatus":"共享后","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"移动"},{"name":"test-母品牌 > 629测试 > test-事业部","campaignName":"test-安慕希","date":"2020-06-29 - 2020-06-28","frequencyStr":"123123+","impression":0,"impressionPercent":"0.00%","shareStatus":"共享后","excBeforeKpi":"0%","ExcAbsKpi":"0%","type":"移动"}]};},mounted() {this.rowspan(this.testArr1, this.testPosition1, "name");this.rowspan(this.testArr2, this.testPosition2, "campaignName");this.rowspan(this.testArr3, this.testPosition3, "date");this.rowspan(this.testArr4, this.testPosition4, "type");this.rowspan(this.testArr5, this.testPosition5, "shareStatus");this.rowspan(this.testArr6, this.testPosition6, "excBeforeKpi");this.rowspan(this.testArr7, this.testPosition7, "ExcAbsKpi");},methods: {rowspan(spanArr, position, spanName) {this.tableData.forEach((item, i) => {if (i === 0) {spanArr.push(1);position = 0;} else {if ( this.tableData[i][spanName] === this.tableData[i - 1][spanName]) {spanArr[position] += 1;spanArr.push(0);} else {spanArr.push(1);position = i;}}});},// 表格合并行objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {const _row = this.testArr1[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}if (columnIndex === 1) {const _row = this.testArr2[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}if (columnIndex === 2) {const _row = this.testArr3[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}if (columnIndex === 3) {const _row = this.testArr4[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}if (columnIndex === 4) {const _row = this.testArr5[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}if (columnIndex === 8) {const _row = this.testArr6[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}if (columnIndex === 9) {const _row = this.testArr7[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}},merage() {this.merageInit();for (let i = 0; i < this.tableData.length; i += 1) {if (i === 0) {// 第一行必须存在this.typeNameArr.push(1);this.typeNamePos = 0;this.storeArr.push(1);this.storePos = 0;this.feeArr.push(1);this.feePos = 0;} else {// 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号// 第一列// eslint-disable-next-line no-lonely-ifif (this.tableData[i].name === this.tableData[i - 1].name) {this.typeNameArr[this.typeNamePos] += 1;this.typeNameArr.push(0);} else {this.typeNameArr.push(1);this.typeNamePos = i;}// 第二列if (this.tableData[i].campaignName === this.tableData[i - 1].campaignName &&this.tableData[i].name === this.tableData[i - 1].name) {this.storeArr[this.storePos] += 1;this.storeArr.push(0);} else {this.storeArr.push(1);this.storePos = i;}// 第三列if (this.tableData[i].date === this.tableData[i - 1].date &&this.tableData[i].campaignName === this.tableData[i - 1].campaignName &&this.tableData[i].name === this.tableData[i - 1].name) {this.feeArr[this.feePos] += 1;this.feeArr.push(0);} else {this.feeArr.push(1);this.feePos = i;}// 第4列if (this.tableData[i].type === this.tableData[i - 1].type &&this.tableData[i].date === this.tableData[i - 1].date &&this.tableData[i].campaignName === this.tableData[i - 1].campaignName &&this.tableData[i].name === this.tableData[i - 1].name) {this.feeArr[this.feePos] += 1;this.feeArr.push(0);} else {this.feeArr.push(1);this.feePos = i;}// 第5列if (this.tableData[i].shareStatus === this.tableData[i - 1].shareStatus &&this.tableData[i].type === this.tableData[i - 1].type &&this.tableData[i].date === this.tableData[i - 1].date &&this.tableData[i].campaignName === this.tableData[i - 1].campaignName &&this.tableData[i].name === this.tableData[i - 1].name) {this.feeArr[this.feePos] += 1;this.feeArr.push(0);} else {this.feeArr.push(1);this.feePos = i;}}}},},};
</script>

element table 合并单元格相关推荐

element table合并单元格
element ui中的table表格数据是动态生成的,如果要求我们对单元格进行合并,这个时候需要借助一个api,:span-method="arraySpanMethod",ar ...
element table 合并单元格错位或单元格后移
合并单元格时占用那个单元格,那么原来的单元格渲染必须清除,否则会将该行数据在该占位单元格位置后移一位: 合并第二.三.四列时,需要把第二列和第三列隐藏 if (columnIndex === 1) { ...
element plus的table合并单元格
element的table合并单元格就element+中的el-table中的span-method方法的使用和遇到的一些问题如果想要将后一列挨着的单元格合并,return 1,2,但是得将后一个 ...
Table合并单元格，表格居中，内容居中显示
例如:新建一张四行四列的表格,第一行的四列合并,第二.三.四行的第一列合并在一起居中显示 <%@ page language="java" contentType=" ...
vue中用table_Vue中table合并单元格用法
地名结果人名性别 {{item.name}} 已完成未完成 {{item.groups[0].name}} {{item.groups[0].sex}} {{item.groups[son]. ...
js实现 table合并单元格
** table合并单元格 function uniteTdCells(tableId){var table = document.getElementById(tableId);for (let i ...
vue原生table合并单元格
vue原生table合并单元格 <table border="1"><thead><tr><th>学习</th>< ...
html table 合并单元格分页,element table组件合并单元格
合并单元格,如果situation 一致,则合并 getSpanArr(data)方法 data就是我们从后台拿到的数据,通常是一个数组:spanArr是一个空的数组,用于存放每一行记录的合并数:po ...
table合并单元格_element ui el-table 合并单元格
element ui table 的合并单元格或者测试 vue 文件 <template><div><el-table:data="tableData&qu ...

element table 合并单元格

抑郁使你厌倦世界，理智使你苟延残喘

element table 合并单元格相关推荐

最新文章

热门文章