el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现

el-table 中有现成的隔行换色功能,只要增加 stripe 属性即可。但是如果有单元格合并的话,这个属性就不可用了。这时候我们就需要动点小心思了。

基于相同字段进行合并

单元格合并:基于表头中的某一列,具有相同值的个数相加进行合并

隔行换色:基于表头中的某一列 ,放到一个集合里,根据下标 判断奇偶行

实现效果如图:

代码实现:

<template>
  <div class="version-contrast__content">
    <el-table :data="tableData" :stripe="false" :span-method="spanMethod" :row-class-name="rowClass">
        <el-table-column prop="num" width="60" label="序号"></el-table-column>
        <el-table-column prop="indexType" label="指标类别"></el-table-column>
        <el-table-column prop="indexName" label="指标名称"></el-table-column>
        <el-table-column prop="unit" label="单位"></el-table-column>
        <el-table-column prop="panoramicMeeting" label="全景会"></el-table-column>
        <el-table-column prop="lastMonthDynamic" label="上月动态"></el-table-column>
        <el-table-column prop="thisMonthDynamic" label="本月动态"></el-table-column>
        <el-table-column width="170" prop="difference" label="差异(本月动态版-全景会)"></el-table-column>
        <el-table-column prop="differenceRate" label="差异率">
            <template slot-scope="scope">
                <span>{{scope.row.differenceRate}}%</span>
            </template>
        </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
        return {
            tableData: [
                {
                    "indexName": "总货值",
                    "num": "1.00",
                    "indexType": "货值指标",
                    "unit": "万元",
                    "panoramicMeeting": "202930",
                    "lastMonthDynamic": "52695",
                    "thisMonthDynamic": "23125",
                    "difference": "25362",
                    "differenceRate": "-88.6"
                },
                {
                    "indexName": "项目开发成本投入",
                    "num": "2.00",
                    "indexType": "成本指标",
                    "unit": "万元",
                    "panoramicMeeting": "202960",
                    "lastMonthDynamic": "51569",
                    "thisMonthDynamic": "23569",
                    "difference": "222",
                    "differenceRate": "-88.4"
                },
                {
                    "indexName": "项目总成本单方",
                    "num": "3.00",
                    "indexType": "成本指标",
                    "unit": "万元",
                    "panoramicMeeting": "3500",
                    "lastMonthDynamic": "632",
                    "thisMonthDynamic": "6326",
                    "difference": "3333",
                    "differenceRate": "80.7"
                }
            ],
            spanMethodOption: {}
        }
    },
    methods: {
        rowClass({row, rowIndex}) {
            var arr = []
            Object.keys(this.spanMethodOption).forEach((item, index)=>{
              // console.log('itemtt', item, index)
                if(row.indexType == item) {
                    if(index %2 === 0) {
                        arr.push('even-rows')
                        //return 'even-rows'//注意:这里return不回起到效果
                    }else{
                        arr.push('odd-rows')
                        //return 'odd-rows' //注意:这里return不回起到效果
                    }
                }
            })
            return arr
        },
        spanMethod ({ row, column, rowIndex, columnIndex }) {
            if(columnIndex === 1) {
                if (row.isShow) {
                    return [this.spanMethodOption[row.indexType], 1]
                }else{
                    return [0, 0]
                }
            }
            // console.log('this.spanMethodOption', this.spanMethodOption)
        },
    },
    created() {
        this.tableData = this.tableData.map(item => {
            if (this.spanMethodOption[item.indexType]) {
                this.spanMethodOption[item.indexType] += 1
                item.isShow = false;
            } else {
                this.spanMethodOption[item.indexType] = 1
                item.isShow = true;
            }
            return item;
        })
    }
}
</script>

<style lang="scss">
::v-deep .el-table {
    .version-table th {
        background-color:#797979;
        .cell {
            color:#fff;
        }
    }
   .even-rows {
      background-color: #fff;
    }

    .odd-rows {
      background-color: #F7F8FA;
    }
    .red {
        color:#ed5327;
    }
     /* 覆盖表格行鼠标移入的背景色 */
      .el-table__body tr.hover-row>td.el-table__cell{
        background-color: transparent !important;
      }
}
</style>
相关推荐
松树戈4 分钟前
JS推荐实践
开发语言·javascript·ecmascript
vener_11 分钟前
LuckySheet协同编辑后端示例(Django+Channel,Websocket通信)
javascript·后端·python·websocket·django·luckysheet
草字17 分钟前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
老码沉思录23 分钟前
React Native 全栈开发实战班 - 性能与调试之打包与发布
javascript·react native·react.js
没有黑科技37 分钟前
基于web的音乐网站(Java+SpringBoot+Mysql)
java·前端·spring boot
前端初见1 小时前
彻底搞懂前端环境变量使用和原理
前端
小王码农记1 小时前
vue中路由缓存
前端·vue.js·缓存·typescript·anti-design-vue
大G哥1 小时前
我用豆包MarsCode IDE 做了一个 CSS 权重小组件
前端·css
乐闻x1 小时前
Vue实践篇:如何在 Vue 项目中检测元素是否展示
前端·javascript·vue.js
麻花20131 小时前
WPF里面的C1FlexGrid表格控件添加RadioButton单选
java·服务器·前端