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

作者站长头像
站长
· 阅读数 13

el-table合并部分成功部分不成功？要实现同图片所示内容，前4列内容都是固定的。渲染代码如下<template> <div><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" slot-scope="scope"><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> </div></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','':'','':'','':'','':'','':'','':''},
        {name:'风速(m/s)',factor:'0.5',grade:'',symbol: '0','':'','':'','':'','':'','':'','':''},
        {name:'风速(m/s)',factor:'0.5',grade:'',symbol: '0','':'','':'','':'','':'','':'','':''},
    ],
    colFields:['name','factor','grade','symbol','','','','','',''],
    spanArr:[],waterForm:{}, };

}, methods: {

getSpanArr() {
  for (let i = 0; i < this.tableData.length; i++) {
    let row = i;
    // let col = i % this.colCount;
    if (row === 0) {
      // i 表示行 j表示列
      for (let j = 0; j < this.colFields.length; j++) {
        this.spanArr[i * this.colFields.length + j] = {
          rowspan: 1,
          colspan: 1,
        };
      }
    } else {
      for (let j = 0; j < this.colFields.length; j++) {
        if (
          this.colFields[j] == "name" ||
          this.colFields[j] == "factor" ||
          this.colFields[j] == "symbol"
        ) { // 指定合并哪些列
        /*this.tableData[row]["School"] !==
              this.tableData[row - 1]["School"]*/
          if (
            this.tableData[row][this.colFields[j]] !==
              this.tableData[row - 1][this.colFields[j]]
          ) { // 哪些不合并:School不一样的,不合并
            this.spanArr[row * this.colFields.length + j] = {
              rowspan: 1,
              colspan: 1,
            };
          } else if (
            this.tableData[row][this.colFields[j]] ===
            this.tableData[row - 1][this.colFields[j]]
          ) {
            let beforeItem =
              this.spanArr[(row - 1) * this.colFields.length + j];
            this.spanArr[row * this.colFields.length + j] = {
              rowspan: 1 + beforeItem.rowspan,// 合并几列
              colspan: 1,// 合并几行
            };
            beforeItem.rowspan = 0;
            beforeItem.colspan = 0;
          } else {
            // rowspan 和 colspan 都为1表格此单元格不合并
            this.spanArr[row * this.colFields.length + j] = {
              rowspan: 1,
              colspan: 1,
            };
          }
        }
      }
    }
  }
  // 对数据进行倒序
  let stack = [];
  for (let i = 0; i < this.colFields.length; i++) {
    for (let j = 0; j < this.tableData.length; j++) {
      // console.log("i=" + i + " j=" + j);
      // i 表示列 j表示行
      if (j === 0) {
        if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
          stack.push(this.spanArr[j * this.colFields.length + i]);
        }
      } else {
        if (this.spanArr[j * this.colFields.length + i].rowspan === 0) {
          stack.push(this.spanArr[j * this.colFields.length + i]);
        } else {
          stack.push(this.spanArr[j * this.colFields.length + i]);
          while (stack.length > 0) {
            let pop = stack.pop();
            let len = stack.length;
            this.spanArr[(j - len) * this.colFields.length + i] = pop;
          }
        }
      }
    }
  }
  // console.log(this.spanArr);
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    return this.spanArr[rowIndex * this.colFields.length + columnIndex];
},}

}, mounted() {

this.getSpanArr();

}, 渲染后结果el-table合并部分成功部分不成功？ 怎么实现效果呢前4列除了第一列和第4列不可编辑其他都是可编辑的(输入框样式的，后面的表头也设置成可编辑的了)

系统能实现效果内容，现在发现第4列怎么都不合并。

回复
1个回答
avatar
test
2024-08-11

先看下效果图：answer image

<template></template>内容没变，waterData保留你的数据，只是使用了新的表格合并方法，你可以参考

export default {
   data() {
     return {
        waterData: [...],
        companyArr: [],
      companyPos: 0,
      simpleArr: [],
      simplePos: 0,
      symbolArr: [],
      symbolPos: 0,
     }
   },
   created() {
     this.merge(this.waterData)
   },
   methods: {
     // 表格行合并方法
    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-column
        width="120"
align="center"
        v-for="(column, index) in 6"
        :key="`column-${index}`"
      >
        <template slot="header">
          <div>
            {{ waterForm[`water${index + 1}_label`] }}
          </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>
</template>

data() {
  return {
    ......,
   waterForm: {
        water1_label: "前10分钟",
        water2_label: "前20分钟",
        water3_label: "前30分钟",
        water4_label: "前40分钟",
        water5_label: "前50分钟",
        water6_label: "前60分钟",
      },
  }
}

answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容