el-table的row-class-name属性条件判断（JavaScript）

最新推荐文章于 2025-11-12 17:14:12 发布

原创最新推荐文章于 2025-11-12 17:14:12 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #elementui

Vue 专栏收录该内容

3 篇文章

订阅专栏

在Vue.js和ElementUI项目中，利用el-table的row-class-name属性结合JavaScript进行条件判断，可以动态地为表格行应用不同样式。本文通过实例展示了如何根据数据内容或行索引设置特定行的样式，例如当日期为'2016-05-02'时，改变行的状态和颜色。通过绑定row-class-name属性并定义相应的样式规则，可以实现对表格行样式的灵活控制。

在使用el-table时，想根据表单中不同的内容赋予每一行不同的样式，官网示例中使用的typescript，尝试使用了JavaScript进行编写
先上el-table部分

<el-table
     :data="tableData"
     style="width: 100%"
     //每一行的状态就通过row-class-name来制定
     row-class-name=""
      >
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
</el-table>

原始数据

const tableData= [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

样式穿透

<style scoped>
.el-table >>> .warning-row {
  	--el-table-tr-bg-color: var(--el-color-warning-lighter);
}
.el-table >>> .success-row {
  	--el-table-tr-bg-color: var(--el-color-success-lighter);
}
</style>

先来看一下效果，由于row-class-name中为空，因此每一行的状态都为默认
在这里插入图片描述
接下来我们开始加上条件判断，符合条件的行会修改状态及颜色。以时间等于"2016-05-02"为例
先在script中加上方法

function tablerowrule(rowindex){
  if(rowindex.row.date === '2016-05-02'){
    return 'success-row'
  }

当date中的时间等于2016-05-02时，会返回一个字符串，而这个字符串在样式穿透中已经定义好了
然后对于el-table中的row-class-name进行绑定

<el-table
     :data="tableData"
     style="width: 100%"
     //每一行的状态就通过row-class-name来制定
     //注意这一行的改变
     :row-class-name="tablerowrule"
      >
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
</el-table>

然后我们刷新一下可以看到符合条件的行状态已经改变
在这里插入图片描述
同理，我们也可以根据原始数据中未展现出来的数据类型进行判断，也可以对于行的index值进行判断。
比如通过行判断

function tablerowrule(rowindex){
  if(rowindex.rowIndex === 1){
    return 'success-row'
  }

具体的判断规则大家可以试一下