vue Element ui 动态合并单元格

实现效果图：

image

​json：

image

---

页面源码：​

控制单元格合并需要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清空一下