ts enum elementUI 表格列表中如何方便的标识不同类型的内容，颜色区分 enum ts + vue3

在TypeScript中，你可以使用枚举（enum）来为Element UI表格中的不同类型内容标记颜色。这里是一个简单的例子：

// 定义一个颜色枚举
enum Colors {
  Red = 'red',
  Green = 'green',
  Blue = 'blue',
}
 
// 假设你有一个表格的数据对象
interface TableData {
  id: number;
  type: string;
  color: string;
}
 
// 根据type为每种类型的内容分配颜色
function getRowStyle(type: string): Colors {
  switch (type) {
    case 'type1':
      return Colors.Red;
    case 'type2':
      return Colors.Green;
    case 'type3':
      return Colors.Blue;
    default:
      return Colors.Red; // 默认颜色
  }
}
 
// 使用函数为表格行设置样式
const tableData: TableData[] = [
  { id: 1, type: 'type1', color: Colors[getRowStyle('type1')] },
  { id: 2, type: 'type2', color: Colors[getRowStyle('type2')] },
  { id: 3, type: 'type3', color: Colors[getRowStyle('type3')] },
  // ...更多数据
];
 
// 在Element UI表格中使用样式
<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="id" label="ID" width="180"></el-table-column>
  <el-table-column prop="type" label="Type" width="180"></el-table-column>
  <el-table-column label="Color" width="180">
    <template slot-scope="scope">
      <div :style="{ backgroundColor: scope.row.color, color: 'white', padding: '8px' }">
        {{ scope.row.color }}
      </div>
    </template>
  </el-table-column>
</el-table>

在这个例子中，我们定义了一个Colors枚举来存储颜色值。getRowStyle函数根据传入的type字符串返回对应的颜色枚举值。然后，我们在表格数据中使用这些颜色值来设置行的样式。在Element UI的表格列模板中，我们使用一个div来显示颜色块，并将其背景色设置为对应行的颜色值。