day83-element表格列合并

表格合并(跨行或者跨列)

有个小需求是表格根据某些属性来合并。element官方提供了方法。但是没有详细的例子。这里记录下一个小例子。


例子

// 这里的实现方法可以变化,但是大体思路是一样的。找到某个元素上下前后元素是否相等,相等则为0。
getSpanArr(data) { 
for (var i = 0; i < data.length; i++) {
    if (i === 0) {
        this.spanArr.push(1);
        this.pos = 0
    } else {
    // 判断当前元素与上一个元素是否相同
// 这里其实可以简化成table的属性。改成可以配置的选项。
if (data[i].name === data[i - 1].name) {
        this.spanArr[this.pos] += 1;
        this.spanArr.push(0);
        } else {
        this.spanArr.push(1);
        this.pos = i;
        }
    }
  }
}

element :span-method=”cellMerage”\


cellMerge({ row, column, rowIndex, columnIndex }) {
     if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
         const _col = _row > 0 ? 1 : 0;
        return {
            rowspan: _row,
             colspan: _col
        }
    }
}

原文:https://blog.csdn.net/qq_29468573/article/details/80742646

文章作者: lmislm
文章链接: http://lmislm.com/2019/04/04/2019-04-04/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog