Element 表格合并 + 树形

最新推荐文章于 2023-08-02 11:05:25 发布

Mr.LiLong

最新推荐文章于 2023-08-02 11:05:25 发布

阅读量1.4k

点赞数

分类专栏： element ui 文章标签： javascript elementui

本文链接：https://blog.csdn.net/qq_43086723/article/details/126346290

版权

element ui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

树形展开按钮放到第二列，设置第一列type为空即可
代码如下：

<el-table-column prop="SORT_" align="center" label="测试" type=""></el-table-column>

根据重复字段，合并表格

数据格式如下
在这里插入图片描述
代码如下

<el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      row-key="SORT_ID" 
      @expand-change="expandChange"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        sortable
        label="数值 1">
      </el-table-column>
      <el-table-column
        prop="amount2"
        sortable
        label="数值 2">
      </el-table-column>
      <el-table-column
        prop="amount3"
        sortable
        label="数值 3">
      </el-table-column>
    </el-table>
/**
     * 处理表格数据合并行
     */
        dealTableData() {
            //把日期相同的数据并排在一块
            const list = this.margePropData(this.tableData, 'SORT_')
            //处理日期相同的合并
            this.tableData = this.mergeRows(list, 'SORT_')
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {

            if ([0].includes(columnIndex) && row.SORT_ != 99) {
                return {
                    rowspan: row.rowspan,
                    colspan: 1
                };
            }
            if (row.SORT_ == 99) {
                if (columnIndex === 0) {
                    return [0, 0]
                } else if (columnIndex === 1) {
                    return [1, 2]
                }
            }
        },
        margePropData(list = [], prop) {
            let arr = [], tempArr = {};
            list.forEach(item => {
                if (!tempArr[item[prop]]) {
                    tempArr[item[prop]] = [item]
                } else {
                    tempArr[item[prop]].push(item)
                }
            })
            for (const tempArrKey in tempArr) {
                arr = [...arr, ...tempArr[tempArrKey]]
            }
            return arr
        },
        mergeRows(list = [], prop) {
            list.forEach(ele => {
                ele.rowspan = 1
            })
            const len = list.length
            for (let i = 0; i < len; i++) {
                for (let j = i + 1; j < len; j++) {
                    if (list[i][prop] === list[j][prop]) {
                        list[i].rowspan++
                        list[j].rowspan--
                    }
                }
                // 这里跳过已经重复的数据
                i = i + list[i].rowspan - 1
            }
            return list
        },
        // 点击树形展开按钮的回调事件，重新改变表格数据，自动计算合并行
        expandChange(row, expanded) {
            var index = 0
            if (row.SORT_ == 1) {
                index = 0
            }
            if (row.SORT_ == 2) {
                index = 4
            }
            if (row.SORT_ == 3) {
                index = 8
            }
            // 拿到当前行的children的length，增加或者减少当前合并行的数目即可
            if (expanded) {
                this.oldrowspan = this.tableData[index].rowspan
                this.$set(this.tableData[index], 'rowspan', this.tableData[index].rowspan + row.children.length)
            } else {
                this.$set(this.tableData[index], 'rowspan', this.tableData[index].rowspan - row.children.length)
            }
        },