el-table merges cells, merges rows and columns

Take my data to debug line by line, the comments are clearly written (every line is written), the focus is on the js part, at the end.

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

The data in 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,
      },]

The last js part is also the focus

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
          };
        }
      }
    },

Guess you like

Origin blog.csdn.net/weixin_44949068/article/details/129046308