美文网首页
elementui动态合并单元格

elementui动态合并单元格

作者: ThemisHoo | 来源:发表于2020-06-06 15:02 被阅读0次
    <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
            };
          }
        },
    

    相关文章

      网友评论

          本文标题:elementui动态合并单元格

          本文链接:https://www.haomeiwen.com/subject/cggazhtx.html