el-table动态修改多列显示样式

在Element UI的`el-table`组件中，如果你需要动态地修改表格中某几列的显示样式，你可以通过监听数据变化、事件或者直接操作每个单元格的`row-class-name`属性来实现。这个属性允许你在渲染每一行的时候提供一个自定义的CSS类名。

例如，假设你想基于某个条件改变某一列的背景颜色，可以这样做：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄">
      <template slot-scope="scope">
        <span :style="{ backgroundColor: scope.row.isSpecial ? 'red' : '' }">{{ scope.row.age }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, isSpecial: false },
        { name: '李四', age: 25, isSpecial: true }
      ]
    };
  },
  methods: {
    // 如果有对应的业务逻辑，可以在这个方法里判断isSpecial状态并更新
    updateSpecialStatus(row) {
      row.isSpecial = /* 根据逻辑更新的状态 */;
    }
  },
  watch: {
    // 或者通过watch监听数据变化，当数据符合条件时动态设置样式
    tableData(newData) {
      newData.forEach(row => {
        if (/* 判断条件 */) {
          this.updateSpecialStatus(row);
        }
      });
    }
  }
};
</script>

在这个例子中，如果`isSpecial`为真，那么该单元格的背景会变为红色。你可以根据实际需求调整颜色、添加其他样式或者响应式的动画效果。