ivew/elment ui 中table组件合并单元格及多列合并

最新推荐文章于 2024-05-22 11:23:12 发布

92huahua

最新推荐文章于 2024-05-22 11:23:12 发布

阅读量404

点赞数 1

分类专栏： Vue 文章标签： ivew elementui 合并单元格

本文链接：https://blog.csdn.net/Cinderellahh92/article/details/111868957

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

首先看下效果：

vue中template


<Table  ref="selection" :columns="deviceColumns" :height="mergeData.length === 0 ? 200 : 650" border 
 :data="mergeData" :span-method="handleSpan">

  data () {
    return {
        deviceColumns: [
        {
          title: '店铺ID',
          key: 'id'
        },
        {
          title: '店铺名称',
          key: 'shopName'
        },
        {
          title: '摄像头',
          key: 'deviceId'
        },
      
      ],
        mergeData:[],
ignoreMergeRow :[]
    },
created(){
    let data =  [
    { 
        id：83,
        shopName:'商店',
        deviceId:19
    },
    { 
        id：51,
        shopName:'水果点',
        deviceId:7
    },
    { 
        id：51,
        shopName:'1111',
        deviceId:7
    }
    ],
    this.mergeData = this.handleMergeRow (data )
},
methods: {
    handleMergeRow (data) {
        let ret = JSON.parse(JSON.stringify(data))
        let collection = {}
        let preIndex = -1
        for (let i in ret) {
            
            let item = ret[i]
            item.source = {}
            for (let key in item) {
                if (key === 'source') {
                    continue
                }
                // 记录每个key           
                if (!collection[key]) {
                    collection[key] = {}
                }
                // 首项或者该项此列不等于上一项此列
                if (preIndex === -1 || ret[preIndex][key] !== item[key]) {
                    // 记录每个key对应的所有值以及其起始索引和出现次数                 
                    collection[key][`${item[key]}#${i}`] = {
                        firstIndex: i,
                        count: 1
                    }
                    // 标注该列的起源index
                    item.source[key] = i
                } else {
                    // 通过上一项找到起源index
                    let source = ret[preIndex].source[key]
                    item.source[key] = source
                    // 合并该列的行数加1
                    collection[key][`${item[key]}#${source}`].count += 1
                }
            }
            preIndex = i
        }
        console.log(collection)
        for (let key in collection) {           
            let items = collection[key]
            console.log(items)
            for (let itemkey in items) {
                // value = {
                //     "firstIndex": "0",
                //     "count": 3
                // }
                let value = items[itemkey]
                // 根据记录的起始索引设置该项的mergeRow
               
                if (!ret[value.firstIndex].mergeRow) {
                    ret[value.firstIndex].mergeRow = {}
                }
                ret[value.firstIndex].mergeRow[key] = value.count
            }
        }
        console.log(ret)
         return ret;
        //this.mergeData = ret
    },
    handleSpan ({row, column, rowIndex, columnIndex}) {
      if (row.mergeRow) {
        // 忽略合并该行此列
        if (this.ignoreMergeRow && this.ignoreMergeRow.indexOf(column.key) >= 0) {
            return {
                rowspan: 1,
                colspan: 1
            }
        }
        // 存在此列的key，则该行此列应显示，向下合并此列的几行（包括自己）则取决于其值
        if (row.mergeRow[column.key]) {
            return {
                rowspan: row.mergeRow[column.key],
                colspan: 1
            }
        } else {
            // 说明该行此列应被在此之上的行合并，rowspan和colspan设置为0，不予显示
            return {
                rowspan: 0,
                colspan: 0
            }
        }
      }
    },
}