Vue使用ElementUI动态修改table单元格背景颜色或文本颜色

在Vue中使用ElementUI动态修改table组件的某个单元格的背景色或文本颜色，可以通过使用:row-class-name属性来为特定行添加类名，然后在CSS中定义样式。如果需要针对单个单元格，可以使用作用域插槽（scoped slots）来自定义单元格的内容。

以下是一个简单的例子，展示如何动态修改单元格的背景色和文本颜色：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <!-- 使用作用域插槽自定义单元格内容 -->
      <template slot-scope="scope">
        <span :style="{ color: getColor(scope.row.name) }">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: 'John' },
        { date: '2016-05-04', name: 'Smith' },
        // 其他数据
      ]
    };
  },
  methods: {
    getColor(name) {
      // 根据名字返回不同的颜色
      if (name === 'John') {
        return 'red';
      } else {
        return 'green';
      }
    }
  }
};
</script>
 
<style>
/* CSS样式 */
</style>

在这个例子中，我们使用了作用域插槽来自定义name列的单元格内容，通过getColor方法根据不同的名字返回不同的颜色，并将这个样式应用到span标签上。这样就可以实现根据单元格内容动态改变文本颜色的需求。背景色的改变可以通过类名或直接在作用域插槽中的元素上设置style属性来实现。