el-table多选表格type=“selection“获取当前行数据给多选框增加插槽逻辑

最新推荐文章于 2025-04-16 14:27:38 发布

果粒橙er

最新推荐文章于 2025-04-16 14:27:38 发布

阅读量3.8k

点赞数 1

分类专栏：笔记文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.youkuaiyun.com/MissChengispink/article/details/127421323

版权

笔记专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在el-table的多选模式下，通过row-class-name属性和CSS伪元素实现根据某一字段为新标识的动态样式。作者分享了遇到的问题、解决方案和具体的代码实现，适用于需要在表格中添加行级标识的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.需求效果图

在这里插入图片描述
如图需要做成这个样子
对于el-table需要增加new的标识根据当前行的某个字段判断。如果是普通的el-table很好做直接在每行第一个td的插槽里写逻辑就行了，但是因为这个是selection多选的表格，用插槽在type="selection"里写插槽后就导致多选框没了，单独插槽里写多选框就要重写写多选的逻辑。
后来想到用::before给每一行第一个td增加样式，直接在el-table-column增加样式，像这样：
在这里插入图片描述
但是发现el-table-column上获取不到当前行获取不到row.isRed

3.解决方案：

给el-table上增加:row-class-name=“rowClassName” 动态判断这里可以获取当前行

4.代码：

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    :row-class-name="rowClassName"
    :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}"
    tooltip-effect="dark"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="60">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="200">
    </el-table-column>
    <el-table-column
      label="是否是新消息"
      width="200">
      <template slot-scope="scope">
        {{ scope.row.isRed?'新':'-' }}
      </template>
    </el-table-column>
    <el-table-column
      label="日期"
      width="200">
      <template slot-scope="scope">
        {{ scope.row.date }}
      </template>
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="200"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        isRed: true
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        isRed: false
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        isRed: true
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        isRed: false
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        isRed: false
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        isRed: true
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        isRed: false
      }],
      multipleSelection: []
    }
  },

  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    rowClassName({ row }) {
      if (row.isRed) {
        return 'red-style'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss">
  .red-style {
    border: 1px solid red;
    background-color: blue;
    td:first-child {
      position: relative;
      &::before {
        content: url("./new.png");
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
      }
    }
  }
</style>