vue3 el-table 行颜色根据 字段改变

在 Vue 3 中使用 Element Plus 的 <el-table> 组件来根据某个字段改变行的颜色,可以通过自定义渲染函数或使用 row-class-name 属性来实现。以下是两种常见的方法:

方法 1:使用 row-class-name 属性

<el-table> 组件的 row-class-name 属性允许你根据行的数据动态返回一个类名,你可以在这个类名中定义颜色。

复制代码
<template>
  <el-table :data="tableData" row-class-name="rowClassName">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', type: 'A' },
  { date: '2016-05-04', name: '张小刚', address: '上海市普陀区金沙江路 1517 弄', type: 'B' },
  // 更多数据...
]);
 
const rowClassName = ({ row, rowIndex }) => {
  if (row.type === 'A') {
    return 'row-color-a';
  } else if (row.type === 'B') {
    return 'row-color-b';
  }
  return ''; // 默认返回空字符串,不应用任何特殊样式
};
</script>
 
<style>
.row-color-a {
  background-color: #f0f9eb; /* 例如,类型A的行背景色 */
}
.row-color-b {
  background-color: #ebf4fa; /* 例如,类型B的行背景色 */
}
</style>

方法 2:使用自定义渲染函数

如果你需要更复杂的行样式控制,可以使用 <el-table-column>render 函数来自定义每一行的渲染。

复制代码
<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
    <el-table-column label="操作" width="100">
      <template #default="{ row, rowIndex }">
        <div :class="getRowClass(row)">{{ row.type }}</div>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', type: 'A' },
  { date: '2016-05-04', name: '张小刚', address: '上海市普陀区金沙江路 1517 弄', type: 'B' },
  // 更多数据...
]);
 
const getRowClass = (row) => {
  if (row.type === 'A') {
    return 'row-color-a';
  } else if (row.type === 'B') {
    return 'row-color-b';
  }
  return ''; // 默认返回空字符串,不应用任何特殊样式
};
</script>
 
<style>
.row-color-a {
  background-color: #f0f9eb; /* 例如,类型A的行背景色 */
}
.row-color-b {
  background-color: #ebf4fa; /* 例如,类型B的行背景色 */
}
</style>

这两种方法都可以根据字段。

相关推荐
老华带你飞1 天前
寝室快修|基于SprinBoot+vue的贵工程寝室快修小程序(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·贵工程寝室快修
正义的大古1 天前
OpenLayers地图交互 -- 章节十一:拖拽文件交互详解
javascript·vue.js·microsoft·openlayers
樱花落海洋1111 天前
layui 表格行级 upload 上传操作
前端·javascript·layui
艾小码1 天前
告别复制粘贴!掌握这7个原则,让你的Vue组件复用性翻倍
前端·javascript·vue.js
X01动力装甲1 天前
@scqilin/phone-ui 手机外观组件库
前端·javascript·ui·智能手机·数据可视化
野木香1 天前
tdengine笔记
开发语言·前端·javascript
千码君20161 天前
React Native:为什么带上version就会报错呢?
javascript·react native·react.js
讨厌吃蛋黄酥1 天前
🔥 面试必考题:手写数组扁平化,5种方法全解析(附代码+图解)
前端·javascript·面试
麦当_1 天前
Cloudflare Workers 环境下的数据库死锁问题及解决方案
javascript·数据库·后端
知识分享小能手1 天前
React学习教程,从入门到精通,React 前后端交互技术详解(29)
前端·javascript·vue.js·学习·react.js·前端框架·react