美文网首页
vue Element ui 动态合并单元格

vue Element ui 动态合并单元格

作者: 小嘿呀 | 来源:发表于2018-12-29 17:00 被阅读0次

    实现效果图:

    image

    ​json:

    image

    页面源码:​

    <el-table :data="data" border height="600" :span-method="objectSpanMethod">
    
                  <el-table-column  :label="head" v-for="(head, key) in header" :key="head">
    
                      <template slot-scope="scope">
    
                        {{data[scope.$index][key]}}
    
                      </template>
    
                  </el-table-column>
    
    </el-table>
    
    

    控制单元格合并需要span-method(官网)

    
    export default {
    
      data() {
    
        return {
    
            data:[],
    
            spanArr:[],   
    
        };
    
      },
    
      methods: {
    
      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][0] === data[i - 1][0]) {
    
                    this.spanArr[this.pos] += 1;
    
                    this.spanArr.push(0);
    
                  } else {
    
                    this.spanArr.push(1);
    
                    this.pos = i;
    
                  }
    
                }
    
            }
    
        },
    
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    
          if (columnIndex === 0) {
    
                const _row = this.spanArr[rowIndex];
    
                const _col = _row > 0 ? 1 : 0;
    
                return {
    
                      rowspan: _row,
    
                      colspan: _col
    
                }
    
              }
    
          }
    
      },
    
      mounted() {
    
          this.getSpanArr(this.data); 
    
      }
    
    }
    
    

    2018-12-26

    发现一个bug,如果需要手动再去生成表格,在时间中调用this.spanArr=[],把spanArr清空一下

    相关文章

      网友评论

          本文标题:vue Element ui 动态合并单元格

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