el-table 合并单元格：如何实现部分成功部分失败的效果？

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

我们希望可以实现以下效果：

代码实现：

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 xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed 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();
  },
};

注意，以上代码中，我们定义了 handleSpanM 方法来处理表格合并。但是，代码中并没有使用这个方法。你可以根据需要修改代码来使用这个方法。

此外，如果你希望后几列表头不可编辑，可以修改以下代码：

改成：

以上就是el-table 合并单元格：如何实现部分成功部分失败的效果？的详细内容，更多请关注慧达安全导航其它相关文章！