element中el-table根据状态改变样式，你不能错过的技能

原创已于 2025-06-09 16:48:54 修改 · 4.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

于 2022-02-25 14:23:30 首次发布

element 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了如何在Vue开发中利用Element UI的el-table组件，通过row-style属性和回调方法实现当表格行id为特定值时文字颜色变化的效果。通过这种方法，可以更直观地展示数据。示例代码展示了如何根据数据动态设置行样式，达到突出显示特定行的目的。

前言

在开发中，如何根据数据的状态来改变表格的样式一直是一个常见的难题。如果你也曾经为此苦恼过，那么本文将为你介绍如何使用 element 中的 el-table 来实现这一目标，让你的数据展示更加直观、易于理解。

需求效果

在这里插入图片描述

需求：表格中当前行的 `id` 等于1时，让此行的文字颜色变为红色。

在这里插入图片描述

实现思路

主要是通过el-table的 row-style 属性，设置行的 style 回调方法，也可以使用一个固定的 object 为所有行设置一样的 style。

实例

<template>
  <div>
    <!-- //:row-style="modality" -->
    <el-table :row-style="modality" :data="tableData" border>
      <el-table-column align="center" prop="date" label="日期"></el-table-column>
      <el-table-column align="center" prop="name" label="姓名"></el-table-column>
      <el-table-column align="center" prop="phone" label="电话"></el-table-column>
      <el-table-column align="center" prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 模拟数据
      tableData: [
        {
          date: "2022-02-09",
          name: "小红",
          phone:"15516698747",
          address: "北京东城区",
          id: 1,
        },
        {
          date: "2022-01-04",
          name: "小蓝",
          phone:"13369588857",
          address: "北京西城区",
        },
        {
          date: "2022-02-01",
          name: "小绿",
          phone:"18858747857",
          address: "北京朝阳区",
        },
        {
          date: "2022-02-25",
          name: "小黄",
          phone:"16682547878",
          address: "北京海淀区",
          id: 1,
        },
      ],
    };
  },
  methods: {
    modality(row) {
      // 通过id标识来改变当前行的文字颜色
      if (row.row.id == 1) {
        return {
          color: "red",
        };
      }
    },
  },
};
</script>