element中el-table根据状态改变样式

小半 • 2023年1月18日下午6:35 • 技术随笔 • 阅读 203

需求效果

需求：表格中当前行的 `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>