devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

element-ui中的el-table合并单元格_element ui table 合并单元格

作者：花生_TL007 | 2024-05-25 09:55:00

赞

踩

element ui table 合并单元格

描述：

在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下：

 而我们想要的数据是下面这种情况，将重复的行进行合并，使表格看起来简单明了，如下：

 

解决方案：

一：合并行

1：html部分

所谓的合并行就是将多行相同的数据变成一行来显示，页面的布局比较简单

  1. <template>
  2.     <div class="table">
  3.         <el-table 
  4.             :data="tableData" 
  5.             :span-method="objectSpanMethod" 
  6.             border 
  7.             style="width: 100%">
  8.             <el-table-column prop="time" label="时间"></el-table-column>
  9.             <el-table-column prop="grade" label="年级"></el-table-column>
  10.             <el-table-column prop="name" label="姓名"></el-table-column>
  11.             <el-table-column prop="subjects" label="科目"></el-table-column>
  12.             <el-table-column prop="score" label="成绩"></el-table-column>
  13.         </el-table>
  14.     </div>
  15. </template>

2：模拟data数据

span-method是el-table上属性，其值是一个函数，objectSpanMethod方法是用来处理合并行的返回值，tableData数据如下

  1. tableData: [
  2.  
  3.   {time:'2020-08-10',grade:'三年二班',name: '小明',subjects:'语文',score: 80 },
  4.  
  5.   {time:'2020-08-10',grade:'三年二班',name: '小明',subjects:'数学',score: 80 },
  6.  
  7.   {time:'2020-08-10',grade:'三年一班',name: '小雷',subjects:'语文',score: 70 },
  8.  
  9.   {time:'2020-08-10',grade:'三年一班',name: '小雷',subjects:'数学',score: 80 },
  10.  
  11.   {time:'2020-08-11',grade:'三年三班',name: '小花',subjects:'语文',score: 60 },
  12.  
  13.   {time:'2020-08-11',grade:'三年三班',name: '小花',subjects:'数学',score: 60 },
  14.  
  15. ],
  16.  
  17. mergeObj: {}, // 用来记录需要合并行的下标
  18.  
  19. tableProps: ['time', 'grade', 'name', 'subjects', 'score'] // 表格中的列名

3：梳理数据以及方法调用

首先需要对数据就行处理，就是比较当前行与上一行的值是否相等（如果是第一行数据，直接将值赋值为1）

在watch中监听表格中的数据，当不为空的的时候，调用数据初始化数据的方法，如下：

  1. watch:{
  2.     "tableData":function (newVal,oldVal){
  3.       console.log("nnnnnnnnnnnn",newVal)
  4.       console.log("oooooooooooo",oldVal)
  5.       if(newVal.length>0){
  6.         this.getSpanArr(this.tableData);
  7.       }
  8.     }
  9.   },
  1. // getSpanArr方法
  2. getSpanArr(data) {
  3.     this.tableProps.forEach((key, index1) => {
  4.         let count = 0; // 用来记录需要合并行的起始位置
  5.         this.mergeObj[key] = []; // 记录每一列的合并信息
  6.         data.forEach((item, index) => {
  7.             // index == 0表示数据为第一行，直接 push 一个 1
  8.             if(index === 0) {
  9.                 this.mergeObj[key].push(1); 
  10.             } else {
  11.                 /*判断当前行是否与上一行其值相等 
  12.                   如果相等 在 count 记录的位置其值 +1
  13.                   表示当前行需要合并 并push 一个 0 作为占位
  14.                 */  
  15.                 if(item[key] === data[index - 1][key]) { 
  16.                     this.mergeObj[key][count] += 1;
  17.                     this.mergeObj[key].push(0);
  18.                 } else {
  19.                     // 如果当前行和上一行其值不相等 
  20.                     count = index; // 记录当前位置 
  21.                     this.mergeObj[key].push(1); // 重新push 一个 1
  22.                 }
  23.             }
  24.         })
  25.     })
  26. }

数据处理好之后就可以调用objectSpanMethod方法了，如下：

  1. // objectSpanMethod方法
  2.     /*默认接受四个值
  3.         ----row==当前行的数据
  4.         ----column==当前列的数据
  5.         ----rowIndex==行的下标
  6.         ----columnIndex==列的下标
  7.     */
  8. // 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
  9. objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  10.     // 判断列的属性
  11.     if(this.tableProps.indexOf(column.property) !== -1) { 
  12.         // 判断其值是不是为0 
  13.         if(this.mergeObj[column.property][rowIndex]) { 
  14.             return [this.mergeObj[column.property][rowIndex], 1]
  15.         } else {
  16.             // 如果为0则为需要合并的行
  17.             return [0, 0]; 
  18.         }
  19.         // 只有 第一列 第二列 第三列 合并行
  20.         // if(columnIndex===1||columnIndex===2||columnIndex===3){
  21.         //   // 判断列的属性
  22.         //   if(this.tableProps.indexOf(column.property) !== -1) {
  23.         //     // 判断其值是不是为0 
  24.         //     if(this.mergeObj[column.property][rowIndex]) { 
  25.         //       return {
  26.         //         rowspan: this.mergeObj[column.property][rowIndex],
  27.         //         colspan: 1
  28.         //       };
  29.         //     } else {
  30.         //       // 如果为0则为需要合并的行
  31.         //       return {
  32.         //         rowspan: 0,
  33.         //         colspan: 0
  34.         //       }; 
  35.         //     }
  36.         //   }
  37.         // }
  38.     }
  39. }

4：效果图

合并后的结果就是我们想要的形式：

 5：合并行的完整代码

  1. <template>
  2.     <div class="table">
  3.         <el-table 
  4.             :data="tableData" 
  5.             :span-method="objectSpanMethod" 
  6.             border style="width: 100%">
  7.             <el-table-column prop="time" label="时间"></el-table-column>
  8.             <el-table-column prop="grade" label="年级"></el-table-column>
  9.             <el-table-column prop="name" label="姓名"></el-table-column>
  10.             <el-table-column prop="subjects" label="科目"></el-table-column>
  11.             <el-table-column prop="score" label="成绩"></el-table-column>
  12.         </el-table>
  13.     </div>
  14. </template>
  15.  
  16. <script>
  17. export default {
  18.     name: 'Table',
  19.     data() {
  20.         return {
  21.             tableData: [
  22.                 { 
  23.                     time: '2020-08-10', grade: '三年二班', 
  24.                     name: '小明', subjects: '语文', score: 80 
  25.                 },
  26.                 { 
  27.                     time: '2020-08-10', grade: '三年二班',
  28.                     name: '小明', subjects: '数学', score: 80 
  29.                 },
  30.                 { 
  31.                     time: '2020-08-10', grade: '三年一班',
  32.                     name: '小雷', subjects: '语文', score: 70 
  33.                 },
  34.                 { 
  35.                     time: '2020-08-10', grade: '三年一班', 
  36.                     name: '小雷', subjects: '数学', score: 80 
  37.                 },
  38.                 { 
  39.                     time: '2020-08-11', grade: '三年三班', 
  40.                     name: '小花', subjects: '语文', score: 60 
  41.                 }, 
  42.                 { 
  43.                     time: '2020-08-11', grade: '三年三班', 
  44.                     name: '小花', subjects: '数学', score: 60 
  45.                 }, 
  46.  
  47.             ],
  48.             mergeObj: {},
  49.             mergeArr: ['time', 'grade', 'name', 'subjects', 'score'],
  50.         };
  51.     },
  52.     watch:{
  53.       "tableData":function (newVal,oldVal){
  54.         console.log("nnnnnnnnnnnn",newVal)
  55.         console.log("oooooooooooo",oldVal)
  56.         if(newVal.length>0){
  57.           this.getSpanArr(this.tableData);
  58.         }
  59.       }
  60.     },
  61.     methods: {
  62.         getSpanArr(data) {
  63.             this.mergeArr.forEach((key, index1) => {
  64.                 let count = 0; // 用来记录需要合并行的起始位置
  65.                 this.mergeObj[key] = []; // 记录每一列的合并信息
  66.                 data.forEach((item, index) => {
  67.                     // index == 0表示数据为第一行，直接 push 一个 1
  68.                     if(index === 0) {
  69.                         this.mergeObj[key].push(1); 
  70.                     } else {
  71.                         /*判断当前行是否与上一行其值相等
  72.                           如果相等 在 count 记录的位置其值 +1
  73.                           表示当前行需要合并 并push 一个 0 作为占位 
  74.                         */   
  75.                         if(item[key] === data[index - 1][key]) { 
  76.                             this.mergeObj[key][count] += 1;
  77.                             this.mergeObj[key].push(0);
  78.                         } else {
  79.                             // 如果当前行和上一行其值不相等 
  80.                             count = index; // 记录当前位置 
  81.                             this.mergeObj[key].push(1); // 重新push 一个 1
  82.                         }
  83.                     }
  84.                 })
  85.             })
  86.         },
  87.         // 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
  88.         objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  89.             // 判断列的属性
  90.             if(this.mergeArr.indexOf(column.property) !== -1) { 
  91.                 // 判断其值是不是为0 
  92.                 if(this.mergeObj[column.property][rowIndex]) { 
  93.                     return [this.mergeObj[column.property][rowIndex], 1]
  94.                 } else {
  95.                     // 如果为0则为需要合并的行
  96.                     return [0, 0]; 
  97.                 }
  98.             }
  99.         }
  100.     },
  101.     
  102. };
  103. </script>
  104.  
  105. <style lang="stylus" scoped>
  106. .table 
  107.     height 100vh
  108.     width 100%
  109.     padding 40px
  110.     box-sizing border-box
  111.     /deep/ .el-table__body tr:hover > td
  112.         background-color: #fff;
  113. </style>

二：合并行列

1：模拟data数据

span-method是el-table上属性，其值是一个函数，objectSpanMethod方法是用来处理合并行的返回值，tableData数据如下

  1. tableData: [
  2.     { 
  3.         time: '2020-08-10', grade: '三年二班', 
  4.         name: '小明', subjects: '语文', score: 80 
  5.     },
  6.     { 
  7.         time: '2020-08-10', grade: '三年二班', 
  8.         name: '小明', subjects: '数学', score: 80 
  9.     }, 
  10.     { 
  11.         time: '2020-08-10', grade: '总成绩', 
  12.         name: '总成绩', subjects: '总成绩', score: 160 
  13.     },
  14.     { 
  15.         time: '2020-08-10', grade: '三年一班', 
  16.         name: '小雷', subjects: '语文', score: 70 
  17.     },
  18.     { 
  19.         time: '2020-08-10', grade: '三年一班', 
  20.         name: '小雷', subjects: '数学', score: 80 
  21.     },
  22.     { 
  23.         time: '2020-08-10', grade: '总成绩', 
  24.         name: '总成绩', subjects: '总成绩', score: 150 
  25.     }, 
  26.     { 
  27.         time: '2020-08-11', grade: '三年三班', 
  28.         name: '小花', subjects: '语文', score: 60 
  29.     }, 
  30.     { 
  31.         time: '2020-08-11', grade: '三年三班', 
  32.         name: '小花', subjects: '数学', score: 60 
  33.     }, 
  34.     { 
  35.         time: '2020-08-11', grade: '总成绩', 
  36.         name: '总成绩', subjects: '总成绩', score: 120 
  37.     }
  38. ],

2：对比当一次的图片

可以看到上面的数据多了一行总成绩，现在的数据在页面显示效果如下：

3：html调整

可以看到总成绩的三个列并没有合并，并不是我们想要的效果，所以需要换一种思路来处理数据

页面的布局也有所调整，如下：

  1. <template>
  2.     <div class="table">
  3.         <el-table 
  4.             :data="tableData" 
  5.             :span-method="objectSpanMethods" 
  6.             border style="width: 100%">
  7.             <template v-for="cols in colConfigs">
  8.                 <!-- 无需合并的列 -->
  9.                 <el-table-column
  10.                     v-if="cols.type === 'label' && !cols.children"
  11.                     :key="cols.prop"
  12.                     :prop="cols.prop"
  13.                     :label="cols.label"
  14.                 >
  15.                 </el-table-column>
  16.                 <!-- 需要合并的列 -->
  17.                 <template v-else-if="cols.type === 'label' && cols.children">
  18.                     <el-table-column
  19.                         v-for="children in cols.children"
  20.                         :key="children.prop"
  21.                         :prop="children.prop"
  22.                         :label="children.label"
  23.                     />
  24.                 </template>
  25.             </template>
  26.         </el-table>
  27.     </div>
  28. </template>

4：在data中声明的变量

  1. // 表格的信息 需要合并的需要放在 children 中
  2. colConfigs: [
  3.     {
  4.         type: 'label',
  5.         children: [
  6.             { prop: 'time', label: '时间' },
  7.             { prop: 'grade', label: '年级' },
  8.             { prop: 'name', label: '姓名' },
  9.             { prop: 'subjects', label: '科目' },
  10.             { prop: 'score', label: '成绩' }
  11.         ]
  12.     }
  13. ],
  14. // 需要合并的行列信息
  15. mergeCols: [
  16.     { index: 0, name: 'time' },
  17.     { index: 1, name: 'grade' },
  18.     { index: 2, name: 'name' },
  19.     { index: 3, name: 'subjects' },
  20.     { index: 4, name: 'score' },
  21. ],
  22. // 用来记录每一个单元格的下标
  23. tableMergeIndex: [],

5：梳理数据以及方法调用

  1. watch:{
  2.     "tableData":function (newVal,oldVal){
  3.       console.log("nnnnnnnnnnnn",newVal)
  4.       console.log("oooooooooooo",oldVal)
  5.       if(this.mergeCols.length > 0) {
  6.         this.newTableMergeData();
  7.       }
  8.     }
  9.   },
  1. // newTableMergeData方法
  2. newTableMergeData() {
  3.     for (let i = 0; i < this.tableData.length; i++) {
  4.         for (let j = 0; j < this.mergeCols.length; j++) {
  5.             // 初始化行、列坐标信息
  6.             let rowIndex = 1;
  7.             let columnIndex = 1;
  8.             // 比较横坐标左方的第一个元素
  9.             if (j > 0 && this.tableData[i][this.mergeCols[j]['name']] 
  10.                 === this.tableData[i][this.mergeCols[j - 1]['name']]) {
  11.                 columnIndex = 0;
  12.             }
  13.             // 比较纵坐标上方的第一个元素
  14.             if (i > 0 && this.tableData[i][this.mergeCols[j]['name']] 
  15.                 === this.tableData[i - 1][this.mergeCols[j]['name']]) {
  16.                 rowIndex = 0;
  17.             }
  18.             // 比较横坐标右方元素
  19.             if (columnIndex > 0) {
  20.                 columnIndex = this.onColIndex(
  21.                     this.tableData[i], j, j + 1, 1, this.mergeCols.length
  22.                 );
  23.             }
  24.             // 比较纵坐标下方元素
  25.             if (rowIndex > 0) {
  26.                 rowIndex = this.onRowIndex(
  27.                     this.tableData, i, i + 1, 1, this.mergeCols[j]['name']
  28.                 );
  29.             }
  30.             let key = this.mergeCols[j]['index'] + '_' + i;
  31.             this.tableMergeIndex[key] = [rowIndex, columnIndex];
  32.         }
  33.     }
  34. },
  35. /**
  36.   * 计算列坐标信息
  37.   * data 单元格所在行数据
  38.   * index 当前下标
  39.   * nextIndex 下一个元素坐标
  40.   * count 相同内容的数量
  41.   * maxLength 当前行的列总数
  42.   */
  43. onColIndex(data, index, nextIndex, count, maxLength) {
  44.     // 比较当前单元格中的数据与同一行之后的单元格是否相同
  45.     if (nextIndex < maxLength && data[this.mergeCols[index]['name']] 
  46.         === data[this.mergeCols[nextIndex]['name']]) {
  47.         return this.onColIndex(data, index, ++nextIndex, ++count, maxLength);
  48.     }
  49.     return count;
  50. },
  51. /**
  52.   * 计算行坐标信息
  53.   * data 表格总数据
  54.   * index 当前下标
  55.   * nextIndex 下一个元素坐标
  56.   * count 相同内容的数量
  57.   * name 数据的key
  58.   */
  59. onRowIndex(data, index, nextIndex, count, name) {
  60.     // 比较当前单元格中的数据与同一列之后的单元格是否相同
  61.     if (nextIndex < data.length && data[index][name] 
  62.         === data[nextIndex][name]) {
  63.         return this.onRowIndex(data, index, ++nextIndex, ++count, name);
  64.     }
  65.     return count;
  66. }

数据处理好之后就可以调用objectSpanMethods方法了，如下：

  1. objectSpanMethods({ row, column, rowIndex, columnIndex }) {
  2.     let key = columnIndex + '_' + rowIndex;
  3.     if (this.tableMergeIndex[key]) {
  4.         return this.tableMergeIndex[key];
  5.     }
  6. }

6：效果图

 7：合并行列的完整代

  1. <template>
  2.     <div class="table">
  3.         <el-table 
  4.             :data="tableData" 
  5.             :span-method="objectSpanMethods" 
  6.             border style="width: 100%">
  7.             <template v-for="cols in colConfigs">
  8.                 <!-- 无需合并的列 -->
  9.                 <el-table-column
  10.                     v-if="cols.type === 'label' && !cols.children"
  11.                     :key="cols.prop"
  12.                     :prop="cols.prop"
  13.                     :label="cols.label"
  14.                 >
  15.                 </el-table-column>
  16.                 <!-- 需要合并的列 -->
  17.                 <template v-else-if="cols.type === 'label' && cols.children">
  18.                     <el-table-column
  19.                         v-for="children in cols.children"
  20.                         :key="children.prop"
  21.                         :prop="children.prop"
  22.                         :label="children.label"
  23.                     />
  24.                 </template>
  25.             </template>
  26.         </el-table>
  27.     </div>
  28. </template>
  29.  
  30. <script>
  31. export default {
  32.     name: 'Table',
  33.     data() {
  34.         return {
  35.             tableData: [
  36.                 { 
  37.                     time: '2020-08-10', grade: '三年二班', 
  38.                     name: '小明', subjects: '语文', score: 80 
  39.                 },
  40.                 { 
  41.                     time: '2020-08-10', grade: '三年二班', 
  42.                     name: '小明', subjects: '数学', score: 80 
  43.                 }, 
  44.                 { 
  45.                     time: '2020-08-10', grade: '总成绩', 
  46.                     name: '总成绩', subjects: '总成绩', score: 160 
  47.                 },
  48.                 { 
  49.                     time: '2020-08-10', grade: '三年一班', 
  50.                     name: '小雷', subjects: '语文', score: 70 
  51.                 },
  52.                 { 
  53.                     time: '2020-08-10', grade: '三年一班', 
  54.                     name: '小雷', subjects: '数学', score: 80 
  55.                 },
  56.                 { 
  57.                     time: '2020-08-10', grade: '总成绩', 
  58.                     name: '总成绩', subjects: '总成绩', score: 150 
  59.                 }, 
  60.                 { 
  61.                     time: '2020-08-11', grade: '三年三班', 
  62.                     name: '小花', subjects: '语文', score: 60 
  63.                 }, 
  64.                 { 
  65.                     time: '2020-08-11', grade: '三年三班', 
  66.                     name: '小花', subjects: '数学', score: 60 
  67.                 }, 
  68.                 { 
  69.                     time: '2020-08-11', grade: '总成绩', 
  70.                     name: '总成绩', subjects: '总成绩', score: 120 
  71.                 }
  72.             ],
  73.             // 表格的信息 需要合并的需要放在 children 中
  74.             colConfigs: [
  75.                 {
  76.                     type: 'label',
  77.                     children: [
  78.                         { prop: 'time', label: '时间' },
  79.                         { prop: 'grade', label: '年级' },
  80.                         { prop: 'name', label: '姓名' },
  81.                         { prop: 'subjects', label: '科目' },
  82.                         { prop: 'score', label: '成绩' }
  83.                     ]
  84.                 },
  85.                 // { type: 'label', prop: 'age', label: '年龄' }
  86.             ],
  87.             // 需要合并的行列信息 index必须是table表格对应的下标 不能随意修改
  88.             mergeCols: [
  89.                 { index: 0, name: 'time' },
  90.                 { index: 1, name: 'grade' },
  91.                 { index: 2, name: 'name' },
  92.                 { index: 3, name: 'subjects' },
  93.                 { index: 4, name: 'score' },
  94.                 // { index: 5, name: 'age' }
  95.             ],
  96.             // 用来记录每一个单元格的下标
  97.             tableMergeIndex: [],
  98.         };
  99.     },
  100.     methods: {
  101.         objectSpanMethods({ row, column, rowIndex, columnIndex }) {
  102.             let key = columnIndex + '_' + rowIndex;
  103.             if (this.tableMergeIndex[key]) {
  104.                 return this.tableMergeIndex[key];
  105.             }
  106.         },
  107.         newTableMergeData() {
  108.             for (let i = 0; i < this.tableData.length; i++) {
  109.                 for (let j = 0; j < this.mergeCols.length; j++) {
  110.                     // 初始化行、列坐标信息
  111.                     let rowIndex = 1;
  112.                     let columnIndex = 1;
  113.                     // 比较横坐标左方的第一个元素
  114.                     if (j > 0 && this.tableData[i][this.mergeCols[j]['name']] 
  115.                         === this.tableData[i][this.mergeCols[j - 1]['name']]
  116.                     ) {
  117.                         columnIndex = 0;
  118.                     }
  119.                     // 比较纵坐标上方的第一个元素
  120.                     if (i > 0 && this.tableData[i][this.mergeCols[j]['name']] 
  121.                         === this.tableData[i - 1][this.mergeCols[j]['name']]
  122.                     ) {
  123.                         rowIndex = 0;
  124.                     }
  125.                     // 比较横坐标右方元素
  126.                     if (columnIndex > 0) {
  127.                         columnIndex = this.onColIndex(
  128.                             this.tableData[i],j,j+1,1,this.mergeCols.length
  129.                         );
  130.                     }
  131.                     // 比较纵坐标下方元素
  132.                     if (rowIndex > 0) {
  133.                         rowIndex = this.onRowIndex(
  134.                             this.tableData,i,i+1,1,this.mergeCols[j]['name']
  135.                         );
  136.                     }
  137.                     let key = this.mergeCols[j]['index'] + '_' + i;
  138.                     this.tableMergeIndex[key] = [rowIndex, columnIndex];
  139.                 }
  140.             }
  141.         },
  142.         /**
  143.          * 计算列坐标信息
  144.          * data 单元格所在行数据
  145.          * index 当前下标
  146.          * nextIndex 下一个元素坐标
  147.          * count 相同内容的数量
  148.          * maxLength 当前行的列总数
  149.          */
  150.         onColIndex(data, index, nextIndex, count, maxLength) {
  151.             // 比较当前单元格中的数据与同一行之后的单元格是否相同
  152.             if (nextIndex < maxLength && data[this.mergeCols[index]['name']] 
  153.                 === data[this.mergeCols[nextIndex]['name']]) {
  154.                 return this.onColIndex(
  155.                     data, index, ++nextIndex, ++count, maxLength
  156.                     );
  157.             }
  158.             return count;
  159.         },
  160.         /**
  161.          * 计算行坐标信息
  162.          * data 表格总数据
  163.          * index 当前下标
  164.          * nextIndex 下一个元素坐标
  165.          * count 相同内容的数量
  166.          * name 数据的key
  167.          */
  168.         onRowIndex(data, index, nextIndex, count, name) {
  169.             // 比较当前单元格中的数据与同一列之后的单元格是否相同
  170.             if (nextIndex < data.length && data[index][name] 
  171.                 === data[nextIndex][name]) {
  172.                 return this.onRowIndex(data,index,++nextIndex,++count,name);
  173.             }
  174.             return count;
  175.         }
  176.     },
  177.     mounted() {
  178.         if(this.mergeCols.length > 0) {
  179.             this.newTableMergeData();
  180.         }
  181.     }
  182. };
  183. </script>
  184.  
  185. <style lang="stylus" scoped>
  186. .table 
  187.     height 100vh
  188.     width 100%
  189.     padding 40px
  190.     box-sizing border-box
  191.     /deep/ .el-table__body tr:hover > td
  192.         background-color: #fff;
  193. </style>

三：兼容

如果不想合并的行需要在colConfigs中调整，如下：

前言：需要做的调整

  1. // 增加一个年龄属性 但是不进行合并
  2. colConfigs: [
  3.     {
  4.         type: 'label',
  5.         children: [
  6.             { prop: 'time', label: '时间' },
  7.             { prop: 'grade', label: '年级' },
  8.             { prop: 'name', label: '姓名' },
  9.             { prop: 'subjects', label: '科目' },
  10.             { prop: 'score', label: '成绩' }
  11.         ]
  12.     },
  13.     { type: 'label', prop: 'age', label: '年龄' }
  14. ]

1：效果图

 2： 如果想要合并，需要在mergeCols中添加数据：

  1. mergeCols: [
  2.     { index: 0, name: 'time' },
  3.     { index: 1, name: 'grade' },
  4.     { index: 2, name: 'name' },
  5.     { index: 3, name: 'subjects' },
  6.     { index: 4, name: 'score' },
  7.     { index: 5, name: 'age' } // 添加需要合并的age列信息 注意index的值
  8. ],

3：新添加的属性合并后效果图

 

另：单纯的行合并

  1.  data{
  2.     return {
  3.         spanArr: [],
  4.         position: 0,
  5.     }
  6. }   
  7.  
  8. rowspan(data) {
  9.             this.spanArr=[];
  10.             data.forEach((item,index) => {
  11.                 if( index === 0){
  12.                     this.spanArr.push(1);
  13.                     this.position = 0;
  14.                 }else{
  15.                     if(data[index].FId === data[index-1].FId ){
  16.                         this.spanArr[this.position] += 1;
  17.                         this.spanArr.push(0);
  18.                     }else{
  19.                         this.spanArr.push(1);
  20.                         this.position = index;
  21.                     }
  22.                 }
  23.             })
  24.         },
  25.         objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  26.             if (columnIndex === 0||columnIndex === 1) {
  27.                 const _row = this.spanArr[rowIndex];
  28.                 const _col = _row>0 ? 1 : 0;
  29.                 return {
  30.                     rowspan: _row,
  31.                     colspan: _col
  32.                 }
  33.             }
  34.         },

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/621572
推荐阅读