el-table合并单元格,合并行与列

拿我的数据去一行一行调试,注释写的很清楚(每行都写了),重点是js部分,在最后面。

<el-table
        class="dialog-table"
        :header-cell-style="{'text-align':'left',background:'#eef1f6',color:'#606266'}"
        :data="equityListData"
        :span-method="arraySpanMethod"
        border
        style="width: 100%">
        <el-table-column
          prop="text1"
          label="权益分配">
        </el-table-column>
        <el-table-column
          prop="text2"
          label="">
        </el-table-column>
        <el-table-column
          prop="platinumNumber"
          label="铂金">
          <template  slot-scope="scope">
            <span v-if="scope.$index != 3">{
    
    {
    
     scope.row.platinumNumber }}</span>
            <el-input-number v-else v-model="scope.row.platinumNumber"  @change="allNumEquityChange()" :min="0" size="mini" class="number-input"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          prop="goldLeveNumber"
          label="黄金">
          <template  slot-scope="scope">
            <span v-if="scope.$index != 3">{
    
    {
    
     scope.row.goldLeveNumber }}</span>
            <el-input-number v-else v-model="scope.row.goldLeveNumber"  @change="allNumEquityChange()" :min="0" size="mini" class="number-input"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          prop="silverNumber"
          label="白金">
          <template  slot-scope="scope">
            <span v-if="scope.$index != 3">{
    
    {
    
     scope.row.silverNumber }}</span>
            <el-input-number v-else v-model="scope.row.silverNumber"  @change="allNumEquityChange()" :min="0" size="mini" class="number-input"></el-input-number>
          </template>
        </el-table-column>
      </el-table>

data里面的数据

// 表格数据
      equityListData: [{
    
    
        text1: '企业账户各等级权益数量',
        text2: '总权益数量',
        platinumNumber: 0,
        goldLeveNumber: 0,
        silverNumber: 0,
      },{
    
    
        text1: '企业账户各等级权益数量',
        text2: '剩余未分配权益数量',
        platinumNumber: 0,
        goldLeveNumber: 0,
        silverNumber: 0,
      },{
    
    
        text1: '企业员工各等级账户人数',
        text2: '企业员工各等级账户人数',
        platinumNumber: 0,
        goldLeveNumber: 0,
        silverNumber: 0,
      },{
    
    
        text1: '请输入各等级账户分配权益数量',
        text2: '请输入各等级账户分配权益数量',
        platinumNumber: 0,
        goldLeveNumber: 0,
        silverNumber: 0,
      },]

最后js部分,也是重点

arraySpanMethod({
     
      row, column, rowIndex, columnIndex }) {
    
    
      if (rowIndex  ===  2 || rowIndex  ===  3) {
    
      // 如果是第3行或者第4行(因为获取的是下标)
        if (columnIndex === 0) {
    
     // 如果是第一列的,占满第一、二列
            return [1, 2];
        }else if (columnIndex === 1) {
    
     // 剩下的全部占0份
            return [0, 0];
        }
      }else if(columnIndex === 0){
    
     // 如果是第1列(因为获取的是下标)
        if (rowIndex === 0) {
    
     // 如果是第一行,占满第一、二行,合并成一个
          return {
    
    
            rowspan: 2,
            colspan: 1
          };
        } else {
    
     // 剩下的占0份
          return {
    
    
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },

猜你喜欢

转载自blog.csdn.net/weixin_44949068/article/details/129046308