2021-09-23

vue+element ui合并单元格

刚进入公司，第一次接触vue，结合element ui组件实现合并单元格，这个方法也是从网上大佬那里看到的，这里只是自己对于自己所做的这个项目的一个小功能的整理。

首先就是利用element ui组件中自带的合并方法，定义一个方法：

<el-table
                                :data="tableZhanData"
                                :span-method="arraySpanMethod"
                                ref="table"
                                border
                                style="width: 100%"
                                :height="tableHeight"
                        >

arraySpanMethod：就是合并的方法。

  methods: {
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                let me = this
                if (me.parentorgArr.length > 0) {
                    if (columnIndex === 0) {
                        const _row_1 = this.parentorgArr[rowIndex]
                        const _col_1 = _row_1 > 0 ? 1 : 0
                        return {
                            rowspan: _row_1,
                            colspan: _col_1
                        }
                    }
                    else if (columnIndex === 1) {
                        const _row_2 = this.orgnameArr[rowIndex]
                        const _col_2 = _row_2 > 0 ? 1 : 0
                        return {
                            rowspan: _row_2,
                            colspan: _col_2
                        }
                    }
                    else if (columnIndex === 2) {
                        const _row_3 = this.bgsArr[rowIndex]
                        const _col_3 = _row_3 > 0 ? 1 : 0
                        return {
                            rowspan: _row_3,
                            colspan: _col_3
                        }
                    }

                }
            },

merageInit：是对要合并的一些初始化
在data（）中实现初始化：tableZhanData：是我从后台获取到的数据

data() {
            return {
                tableZhanData: [],
                parentorgArr: [],
                parentorgPos: 0,
                orgnameArr: [],
                orgnamePos: 0,
                bgsArr: [],
                bgsPos: 0
            }
        },

 merageInit() {
                let me = this
                me.parentorgArr = []//上级单位
                me.parentorgPos = 0
                me.orgnameArr = []//站点的名称
                me.orgnamePos = 0
                me.bgsArr = []//表格数呢一列
                me.bgsPos = 0
            },

merge方法：

merage() {
                let me = this
                this.merageInit()
                me.parentorgArr = []
                me.orgnameArr = []
                me.bgsArr = []
                if (me.tableZhanData.length > 0) {
                    for (let i = 0; i < this.tableZhanData.length; i++) {
                        if (i === 0) {
                            let me = this
                            me.parentorgArr.push(1)
                            me.parentorgPos = 0
                            me.orgnameArr.push(1)
                            me.orgnamePos = 0
                            me.bgsArr.push(1)
                            me.bgsPos = 0
                        }
                        else {
                            /*上级单位*/
                            if (this.tableZhanData[i].parentorgname === this.tableZhanData[i - 1].parentorgname) {
                                this.parentorgArr[this.parentorgPos] += 1
                                this.parentorgArr.push(0)
                            }
                            else {
                                this.parentorgArr.push(1)
                                this.parentorgPos = i
                            }
                            if (this.tableZhanData[i].orgname === this.tableZhanData[i - 1].orgname && this.tableZhanData[i].parentorgname === this.tableZhanData[i - 1].parentorgname) {
                                this.orgnameArr[this.orgnamePos] += 1
                                this.orgnameArr.push(0)
                            }
                            else {
                                this.orgnameArr.push(1)
                                this.orgnamePos = i
                            }
                            if (this.tableZhanData[i].orgname === this.tableZhanData[i - 1].orgname
                                    && this.tableZhanData[i].parentorgname === this.tableZhanData[i - 1].parentorgname) {
                                this.bgsArr[this.bgsPos] += 1
                                this.bgsArr.push(0)
                            }
                            else {
                                this.bgsArr.push(1)
                                this.bgsPos = i
                            }
                        }
                    }
                }
                else {
                    me.parentorgArr = []
                    me.orgnameArr = []
                    me.bgsArr = []
                }
            },

我需要的这个小功能是在搜索的时候实现合并行，searchrenwu是搜索的点击事件，在这里调用merge方法：

<el-form-item>
     <el-button type="primary" @click="searchRenwu" size="medium">查询</el-button>
 </el-form-item>

  searchRenwu() {
                let me = this
                let Params = {
                    search: {
                        orgid: me.searchParams.search.orgid
                    }
                }
                if (me.year !== '' || me.year !== null) {
                    /*获取当前年份*/
                    Params.search.year = utils.formatDate(me.year, 'yyyy')
                }
                me.exportParams = {}
                me.exportParams = Params
                let searchParams = utils.addFormData(Params)
                me.$axios.post('/fcst/taskquery/queryTask', searchParams).then(function(data) {
                    me.tableZhanData = data
                    me.merage()
                })
            },