element-ui table列合并

最新推荐文章于 2024-08-13 23:10:15 发布

风儿轻丶

最新推荐文章于 2024-08-13 23:10:15 发布

阅读量6.4k

点赞数 1

本文链接：https://blog.csdn.net/qq_21423689/article/details/80062738

版权

示例json数组：

tableData6: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12          
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        },
			{
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }],
        column_row_offset: {  
        id: [3, 1, 1,1,1,1],  
        name: [2, 1, 1, 1,1,1,1],  
        amount1: [1, 1, 1, 1, 1,1,1,1],  
        amount2: [1, 1, 1, 1, 1,1,1,1],  
        amount3: [1, 1, 1, 1, 1,1,1,1]  
      },  
      now_col_row_num: {},  
      now_col_offset: {},

根据

column_row_offset数组里面相应字段的值进行行合并

比如 id：[2,1,1,1] 就是说列一共五列前两列进行合并

其他自行脑补。

方法：

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (!this.now_col_row_num[column.property]) {  
        this.now_col_row_num[column.property] = Object.assign([], this.column_row_offset[column.property]);  
        let a = this.now_col_row_num[column.property].shift();  
        this.now_col_offset[column.property] = a;  
        return {  
          rowspan: a,  
          colspan: 1  
        };  
      } else if (rowIndex >= this.now_col_offset[column.property]) {  
        let a = this.now_col_row_num[column.property].shift();  
        this.now_col_offset[column.property] += a;  
        return {  
          rowspan: a,  
          colspan: 1  
        };  
      } else {  
        return {  
          rowspan: 0,  
          colspan: 0  
        };  
      }  
   
    }

组件：

<el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
					<el-table-column prop="id" label="ID" width="180">
					</el-table-column>
					<el-table-column prop="name" label="姓名">
					</el-table-column>
					<el-table-column prop="amount1" label="数值 1（元）">
					</el-table-column>
					<el-table-column prop="amount2" label="数值 2（元）">
					</el-table-column>
					<el-table-column prop="amount3" label="数值 3（元）">
					</el-table-column>
				</el-table>