el-table实现单元格合并，斑马纹错乱问题解决，鼠标上浮样式问题解决

简介

el-table（是element UI 的哦）实现单元格合并，解决合并之后斑马纹样式问题，解决鼠标上浮样式问题；总之买不了吃亏，买不了上当，绝对靠谱！！！

本次开发使用的是element UI + vue

小本本记重点

第一点：row-class-name：用来重写表格的斑马纹，在合并单元格时，el-table自带的斑马纹样式会混乱，所以需要重写一下。

第二点：重写斑马纹，stripe属性一定不能写，要用这个属性就不需要重写斑马纹，但是合并之后很丑，建议重写一下斑马纹；不需要斑马纹的可自行忽略这一点。

第三点：传入span-method方法可以实现合并行或列，这个官方文档有，可以自行查看。

第四点：合并之后序号就不能用index，需要重新赋值，代码中Nosort是我自定义的字段，序号prop= “Nosort”，如果还是写index的话，他会默认展示合并的第一个序号，那么页面上的序号就很混乱，例如1,3,5这种，报看；如果序号列不合并的话，就可以不用重新定义序号，博主的是合并了序号列的哦。

html代码

<el-table :data="tableData" ref="tableData" border :row-class-name="tabRowClassName" :span-method="objectSpanMethod">
<el-table-column  label="序号" width="60" align="center" prop="Nosort"></el-table-column>
    <!-- 其余需要展示的列就自己写了哦 -->
</el-table>

js代码

data () {
    return {
        tableData: [],
        spanArr: [],
        tablePos: 0
    }
},
watch: { 
//监听tableData的变化
    tableData: {
        handler () {
            this.getSpanArr(this.tableData)
        },
        immediate: true
    }
},
created () {
    // 这个不用解释，但是我就是想一个注释在这里
    this.getTableDta()
},
methods: {
    getTableDta () {
        //调用接口，获取数据啥的就自己写一下哈
        this.tableData = d.data.list
        this.setRowSpans() // 调用合并单元格的方法
    },
    getSpanArr (data) {
        this.spanArr = []
        this.tablePos = 0
        for (var i = 0; i < data.length; i++) {
            if (i === 0) {
                this.spanArr.push(1)
                this.tablePos = 0
            } else {
                // 这里我用的是id相同的进行合并，大家伙可以按需改变哦~
                if (data[i].id === data[i - 1].id) {
                    this.spanArr[this.tablePos] += 1
                    this.spanArr.push(0)
                } else {
                    this.spanArr.push(1)
                    this.tablePos = i
                }
            }
        }
        // 这里就是重新编写序号啦，用Nosort装起来，合并之后页面上就会按照合并的数据展示1234
        let Nosort = 0
        for (let n in this.spanArr) {
            if (this.spanArr[n] > 0) {
                Nosort += 1
                this.$set(data[n], 'Nosort', Nosort)
            }
        }
    },
    // 合并列，里面的数字代表需要合并的列号，从0开始。合并行也是同样的道理，但是一般用不到
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
        if ([0, 1, 2, 3].includes(columnIndex)) {
            return {
                rowspan: row.rowspan,
                colspan: 1
            }
        }
    },
    // 给数据加上rowspan用来合并单元格，classStripe用来判断是否新加class
    setRowSpans () {
        this.tableData.forEach(value => {
        value.rowspan = 1
        value.classStripe = false
        })
        // 这里我也是用的id相同的进行合并，大家伙可以按需改变哦~
        for (let i = 0; i < this.tableData.length; i++) {
            for (let j = i + 1; j < this.tableData.length; j++) {
                if (this.tableData[i].id === this.tableData[j].id) {
                    // 当前行rowspan +1 下一行-1
                    this.tableData[i].rowspan++
                    this.tableData[j].rowspan--
                    this.tableData[j].classStripe = this.tableData[i].classStripe
                } else {
                    this.tableData[j].classStripe = !this.tableData[i].classStripe
                }
            }
            // 跳过重复数据
            i = i + this.tableData[i].rowspan - 1
        }
    },
    tabRowClassName ({row, rowIndex}) {
        if (row.classStripe) {
            // 给它新增一个类名
            return 'warning-row'
        }
    },
}

css

第五点：不能写scoped，会不生效

重写斑马纹样式

<style lang="less">
// 鼠标上浮的样式，用不到可以不写
.el-table tbody tr:hover > td {
  background-color: transparent !important;
}
.warning-row {
  background-color: #FAFAFA !important;
}
</style>

示例图

博主暂时还没有弄好，项目数据不能放出来，等我弄好了再放上来