el-table给某一行加背景色

最新推荐文章于 2025-06-22 15:34:55 发布

spring_007_999

最新推荐文章于 2025-06-22 15:34:55 发布

阅读量706

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/spring_007_999/article/details/134263989

文章展示了如何在Vue的ElementUI表格中，当总价大于100时，使用CSS样式将该行背景色设置为红色。作者提供了HTML模板、JavaScript方法和相关CSS样式代码。

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

数据列表中总价大于100的一行背景色为红色，效果图如下：

代码示例：

<template>
  <div id="app">
   
    <!-- 测试区域！！！！！！！！！！！！！！！！！ -->
    <el-table :data="tableData" style="width: 50%" :row-class-name="tableRowClassName">
      <el-table-column prop="name" label="物品" width="180" />
      <el-table-column prop="danjia" label="单价" width="100" />
      <el-table-column label="数量" align="center" prop="num" />
      <el-table-column label="总价" align="center" prop="zongjia" />
    </el-table> 
    <!-- 测试区域结束！！！！！！！！！！！！！！！ -->

  </div>
</template>
<script>

export default {
  name: '',
  data(){
    return{
       tableData:[
          {
            id:1,
            name:"物品1",
            danjia: 10,
            num: 1,
            zongjia:10
          },
          {
            id:2,
            name:"物品2",
            danjia: 50,
            num: 5,
            zongjia:250
          },
          {
            id:3,
            name:"物品3",
            danjia: 30,
            num: 3,
            zongjia:90
          },
        ],

    }
  },
  methods:{
    //指定行颜色
    tableRowClassName: function({ row, rowIndex }) {
      console.log(row, 'row');
      console.log("rowIndex",rowIndex);
      if (row.zongjia>100) {
        return 'rowbg';
      }
    }
  },
  mounted(){
    
  }
}
</script>

<style>
.rowbg{
  background: pink!important;
}
</style>

注意：加的样式里面后边要加上 !important 否则权重不够样式加不上。