el-table合并

最新推荐文章于 2024-06-12 13:03:03 发布

优柔寡断的鬼

最新推荐文章于 2024-06-12 13:03:03 发布

阅读量297

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_60566407/article/details/121805701

版权

:span-method="objectSpanMethod"     //这里是el-table的方法





watch监听
            equipmentleixingdata: {   //equipmentleixingdata是el-table绑定的数组对象
                handler () {
                    this.getSpanArr(this.equipmentleixingdata)
                },
                immediate: true
            }




坚挺的事件（data）是el-table绑定的数组对象
getSpanArr(data) {
                this.spanArr = []
                this.pos = 0
                for (var i = 0; i < data.length; i++) {
                    if (i === 0) {
                    // 如果是第一条记录（即索引是0的时候），向数组中加入１
                    this.spanArr.push(1)
                    this.pos = 0
                    } else {
                    if (data[i].stationName === data[i - 1].stationName) {
                        // 如果date相等就累加，并且push 0 （这里的判断视自己的判定依据改变）
                        this.spanArr[this.pos] += 1
                        this.spanArr.push(0)
                    } else {
                        // 不相等push 1
                        this.spanArr.push(1)
                        this.pos = i
                        }
                    }
                }
              },

el-table的方法
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            // 用于设置要合并的列 0 表示第一列
                if (columnIndex === 0) {
                    const cRow = this.spanArr[rowIndex]
                    const cCol = cRow > 0 ? 1 : 0
                    return {
                        rowspan: cRow, // 合并的行数
                        colspan: cCol // 合并的列数，为0表示不显示
                    }
                }
            },