示例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>

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐