elementui动态合并单元格

2020-06-06  本文已影响0人  ThemisHoo
<el-table
                            v-loading="tableLoading"
                            :data="tableData"
                            size="mini"
                            style="width: 100%"
                            :span-method="objectSpanMethod">
                   <el-table-column
                                prop="scenceType"
                                label="双录流程">
                   </el-table-column>
 </el-table>
data() {
    return {
      spanArr: [],
      pos: 0
    };
  },
// 获取详情
    getCollectInfoDetailApi(collectId) {
      getCollectInfoDetail({ collectId }).then(data => {
        let res = data.data;
        if (res.data.length > 0) {
          this.tableData = res.data;
          let scenceTypeList = res.data.map(e => {
            return e.scenceType;
          });
          this.getSpanArr(scenceTypeList);
        }
      });
    },
// data 为需要合并的表格参数
getSpanArr(data) {
      console.log(data);

      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);

          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同,因合并第一个所以[0]

          if (data[i] === data[i - 1]) {
            this.spanArr[this.pos] += 1;

            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);

            this.pos = i;
          }
        }
      }
      console.log(this.spanArr);
    },
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];

        const _col = _row > 0 ? 1 : 0;

        return {
          rowspan: _row,

          colspan: _col
        };
      }
    },
上一篇下一篇

猜你喜欢

热点阅读