vue+element-ui之span-method属性实现相同数据合并单元格

最新推荐文章于 2023-08-02 13:46:25 发布

邪小新

最新推荐文章于 2023-08-02 13:46:25 发布

阅读量890

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_42074075/article/details/122195329

版权

前端开发表格合并日期处理数据渲染 JavaScript

关键词由CSDN通过智能技术生成

js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

效果：根据相同日期进行合并

代码:

   objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 1) {
                let spanArr = this.getSpanArr(this.dayData, 'day_time');
                const _row = spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                };
            }
        },
        // 处理合并行的数据
        getSpanArr(data, spanKey) {
            let that = this;
            let spanArr = [];
            let pos = '';
            for (let i = 0; i < data.length; i++) {
                if (i === 0) {
                    spanArr.push(1);
                    pos = 0;
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (data[i][spanKey] === data[i - 1][spanKey]) {
                        spanArr[pos] += 1;
                        spanArr.push(0);
                    } else {
                        spanArr.push(1);
                        pos = i;
                    }
                }
            }
            return spanArr;
        },