Element Plus修改表格行、单元格样式

最新推荐文章于 2025-09-23 16:52:14 发布

原创

最新推荐文章于 2025-09-23 16:52:14 发布 · 2.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文介绍了如何在Element Plus中根据表格数据动态修改行和单元格样式。通过`row-class-name`和`cell-class-name`属性，可以实现对特定行和单元格的样式设置，同时分享了设置表头样式的技巧，包括处理背景颜色覆盖的问题。

Element Plus修改表格行、单元格样式

前言

实习工作需要根据表格的状态字段来设置行的样式，记录一波。

先来一下基础配置。(Vue3)

<template>
  <el-table :data="tableData" border style="width: 400px">
    <el-table-column prop="name" label="姓名" width="100" />
    <el-table-column prop="age" label="年龄" width="100" />
    <el-table-column prop="job" label="工作" />
  </el-table>
</template>

<script setup> const tableData = [
  {
    name: "clz",
    age: 21,
    job: "Coder",
  },
  {
    name: "czh",
    age: 21,
    job: "Coder",
  },
  {
    name: "赤蓝紫",
    age: 21,
    job: "Coder",
  },
]; </script>

<style lang="less" scoped>
</style>