el-table合并行或列

在这里插入图片描述

<el-table
  :data="tableData"
  :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>
tableData: [{
    
    
  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
}]
methods: {
    
    
 objectSpanMethod({
     
      row, column, rowIndex, columnIndex }) {
    
    
   if(columnIndex===1) {
    
    
     if(rowIndex===1) {
    
    
       // 第2列,第2行(表头不算)
       // 第一个元素代表rowspan,第二个元素代表colspan
       return [2, 2];
     }else if(rowIndex===2) {
    
    
       // 第2列,第3行(表头不算)
       return [0, 0];
     }
   }
   else if(columnIndex===2) {
    
    
     if(rowIndex===1 ) {
    
    
       // 第3列,第2行(表头不算)
       return [0, 0];
     }else if(rowIndex===2) {
    
    
       // 第3列,第3行(表头不算)
       return [0, 0];
     }
   }
 } 
}

猜你喜欢

转载自blog.csdn.net/qq_46302247/article/details/129261315