el-table 合并前四列：为什么第四列无法合并？

el-table合并部分成功部分不成功？

问题描述:

需要合并el-table中前4列的内容，但是第4列无法合并。

渲染代码:

HaiSnap

一站式AI应用开发和部署工具

下载

<el-table :data="waterData" border :span-method="handleSpanM">
  <el-table-column align="center" width="65">
    <template slot-scope="scope">{{scope.row.name }}</template>
  </el-table-column>
  <el-table-column align="center" width="70" label="系数">
    <template slot-scope="scope">
      <el-input size="mini" class="" v-model="scope.row.factor"></el-input>
    </template>
  </el-table-column>
  <el-table-column align="center" width="120" label="等级分数">
    <template slot-scope="scope">
      <el-input size="mini" v-model="scope.row.grade"></el-input>
    </template>
  </el-table-column>
  <el-table-column align="center" width="180" label="符号选择">
    <template slot-scope="scope">
      <div class="symbol">
        <span style="display: none;">{{ scope.row.symbol }}</span>
        <span class="symbol_range"></span>
      </div>
    </template>
  </el-table-column>
  <el-table-column width="120" v-for="(column,index) in 6" :key="`column-${index}`">
    <template slot="header">
      <div>
        <el-input size="small" v-model="waterForm[`water${index + 1}_label`]">
        </el-input>
      </div>
    </template>
    <template slot-scope="scope">
      <div>
        <el-input size="small" v-model="waterForm[`water${index + 1}_factor`]"></el-input>
      </div>
    </template>
  </el-table-column>
</el-table>

解决方法:

可以使用自定义的合并方法来实现特定列的合并。

// 合并方法
merge(tableData) {
  this.companyArr = [];
  this.companyPos = 0;
  this.simpleArr = [];
  this.simplePos = 0;
  this.symbolArr = [];
  this.symbolPos = 0;
  for (var i = 0; i < tableData.length; i++) {
    if (i === 0) {
      // 第一行必须存在
      this.companyArr.push(1);
      this.companyPos = 0;
      this.simpleArr.push(1);
      this.simplePos = 0;
      this.symbolArr.push(1);
      this.symbolPos = 0;
    } else {
      // 第一列
      if (tableData[i].name === tableData[i - 1].name) {
        this.companyArr[this.companyPos] += 1;
        this.companyArr.push(0);
      } else {
        this.companyArr.push(1);
        this.companyPos = i;
      }

      // 第二列
      if (
        tableData[i].name === tableData[i - 1].name &&
        tableData[i].factor === tableData[i - 1].factor
      ) {
        this.simpleArr[this.simplePos] += 1;
        this.simpleArr.push(0);
      } else {
        this.simpleArr.push(1);
        this.simplePos = i;
      }

      // 第四列
      if (
        tableData[i].name === tableData[i - 1].name &&
        tableData[i].factor === tableData[i - 1].factor &&
        tableData[i].symbol === tableData[i - 1].symbol
      ) {
        this.symbolArr[this.symbolPos] += 1;
        this.symbolArr.push(0);
      } else {
        this.symbolArr.push(1);
        this.symbolPos = i;
      }
    }
  }
},

//合并方法
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    // 合并第一列
    const _row_1 = this.companyArr[rowIndex];
    const _col_1 = _row_1 > 0 ? 1 : 0; // 如果被合并了_row=0则它这个列需要取消
    return {
      rowspan: _row_1,
      colspan: _col_1,
    };
  } else if (columnIndex === 1) {
    // 合并第二列
    const _row_2 = this.simpleArr[rowIndex];
    const _col_2 = _row_2 > 0 ? 1 : 0;
    return {
      rowspan: _row_2,
      colspan: _col_2,
    };
  } else if (columnIndex === 3) {
    // 合并第四列
    const _row_3 = this.symbolArr[rowIndex];
    const _col_3 = _row_3 > 0 ? 1 : 0;
    return {
      rowspan: _row_3,
      colspan: _col_3,
    };
  }
},

完整示例:

<template>
  <el-table :data="waterData" border :span-method="arraySpanMethod">
    <el-table-column align="center" width="65">
      <template slot-scope="scope">{{scope.row.name }}</template>
    </el-table-column>
    <el-table-column align="center" width="70" label="系数">
      <template slot-scope="scope">
        <el-input size="mini" class="" v-model="scope.row.factor"></el-input>
      </template>
    </el-table-column>
    <el-table-column align="center" width="120" label="等级分数">
      <template slot-scope="scope">
        <el-input size="mini" v-model="scope.row.grade"></el-input>
      </template>
    </el-table-column>
    <el-table-column align="center" width="180" label="符号选择">
      <template slot-scope="scope">
        <div class="symbol">
          <span style="display: none;">{{ scope.row.symbol }}</span>
          <span class="symbol_range"></span>
        </div>
      </template>
    </el-table-column>
    <el-table-column width="120" v-for="(column,index) in 6" :key="`column-${index}`">
      <template slot="header">
        <div>
          <el-input size="small" v-model="waterForm[`water${index + 1}_label`]">
          </el-input>
        </div>
      </template>
      <template slot-scope="scope">
        <div>
          <el-input size="small" v-model="waterForm[`water${index + 1}_factor`]"></el-input>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData:[
        {name:'降水(mm)',factor:'0.7',grade:'',symbol: '1','':'','':'','':'','':'','':'','':''},
        {name:'降水(mm)',factor:'0.7',grade:'',symbol: '1','':'','':'','':'','':'','':'','':''},
        {name:'降水(mm)',factor:'0.7',grade:'',symbol: '1','':'','':'','':'','':'','':'','':''},
        {name:'降水(mm)',factor:'0.7',grade:'',symbol: '1','':'','':'','':'','':'','':'','':''},
        {name:'风速(m/s)',factor:'0.5',grade:'',symbol: '0','':'','':'','':'','':'','':'','':''},
        {name:'风速(m/s)',factor:'0.5',grade:'',symbol: '0','':'','':'','':'','':'','':'','':''},