欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue elementui table表格动态合并单元格

程序员文章站 2022-03-04 11:51:50
...
	  getTableList(){
	    //获取表格数据方法在此方法返回成功数据是调用
	    this.rowspan();
	  },
      rowspan() {
        debugger;
        var that = this;
        that.spanArr = [];
        that.JRLTableData.forEach((item,index) => {
          debugger;
          if( index === 0){
              that.spanArr.push(1);
              that.position = 0;
          }else{
            if(that.JRLTableData[index].stoveId === that.JRLTableData[index-1].stoveId ){
              that.spanArr[that.position] += 1;
              that.spanArr.push(0);
            }else{
              that.spanArr.push(1);
              that.position = index;
            }
          }
        })
      },
      //在el-table中调用
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //表格合并行
      debugger;
      //笨方法要合并几列就写几个
        if(columnIndex === 0){
          const _row = this.spanArr[rowIndex];
          const _col = _row>0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        if(columnIndex === 1){
          const _row = this.spanArr[rowIndex];
          const _col = _row>0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        if(columnIndex === 2){
          const _row = this.spanArr[rowIndex];
          const _col = _row>0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        if(columnIndex === 3){
          const _row = this.spanArr[rowIndex];
          const _col = _row>0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }
        if(columnIndex === 4){
          const _row = this.spanArr[rowIndex];
          const _col = _row>0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },
相关标签: vue.js javascript