vue columns属性根据不同的状态设置不同的样式

可以使用计算属性来动态设置columns的样式。例如：

<template>
  <div>
    <el-table :data="tableData" :columns="tableColumns"></el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 35, status: 'active' },
        { name: 'Jane', age: 25, status: 'inactive' },
        { name: 'Bob', age: 42, status: 'active' },
      ],
      tableColumns: [
        { prop: 'name', label: 'Name' },
        { prop: 'age', label: 'Age' },
        { prop: 'status', label: 'Status' },
      ],
    };
  },
  computed: {
    tableColumnsWithStyle() {
      return this.tableColumns.map((column) => {
        if (column.prop === 'status') {
          return {
            ...column,
            align: 'center',
            formatter: (row) => {
              return `<span style="color: ${
                row.status === 'active' ? 'green' : 'red'
              }">${row.status}</span>`;
            },
          };
        }
        return column;
      });
    },
  },
};
</script>

在computed中创建了一个计算属性tableColumnsWithStyle，它返回一个新的columns数组，通过map方法遍历原始的columns数组，如果当前列的prop是status，就返回一个新的包含样式的列对象，否则返回原始列对象。在这个新的列对象中，我们设置了列的文字居中和formatter函数来动态设置文字颜色。

然后在模板中使用这个计算属性来渲染表格，即用:columns="tableColumnsWithStyle"代替:columns="tableColumns"。