Element UI 表格：点击项目名称改变颜色 - Vue.js 实现

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column
        label="项目名称"
        align="center"
        prop="projectCode"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span :style="{ color: scope.row.color }" @click="handleClick(scope.row)">
            {{ scope.row.projectCode }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          projectCode: "项目1",
          color: "black"
        },
        {
          id: 2,
          projectCode: "项目2",
          color: "black"
        },
        {
          id: 3,
          projectCode: "项目3",
          color: "black"
        }
      ]
    };
  },
  methods: {
    handleClick(row) {
      // 取反改变颜色
      row.color = row.color === "black" ? "red" : "black";
    }
  }
};
</script>