el-table-column选中给颜色

在 Element Plus 的表格组件 (`el-table`) 中，如果你想要在列头(`el-table-column`)被点击时动态地给特定列的文本颜色加上高亮，你可以利用 `v-if` 或者 `class` 绑定来实现。以下是一个简单的示例：

首先，创建一个用于显示不同颜色的 CSS 样式：

.highlighted-col {
  color: red; /* 更改为你想要的颜色 */
}

然后，在你的模板中，给每个 `el-table-column` 添加一个条件判断或者 `class` 属性：

<template>
  <el-table-column
    v-for="(column, index) in columns"
    :key="index"
    :header-align="column.headerAlign || 'center'"
    :label="column.label"
    :width="column.width"
    :sortable="column.sortable"
    @click="toggleColor(index)"
  >
    {{ column.dataIndex }}
  </el-table-column>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        // 这里是你的列配置，假设有一个名为 "colorToggle" 的布尔值
        {
          label: 'Column',
          dataIndex: 'colorToggle', 
          headerAlign: 'center',
          type: 'selection',
          selectedRowKeys: [], // 存储当前选中的行 key
          onSelectionChange(selectedRows) {
            this.selectedRowKeys = selectedRows.map(row => row.key);
          },
        },
      ],
    };
  },
  methods: {
    toggleColor(columnIndex) {
      const isHighlighted = !this.columns[columnIndex].isHighlighted;
      this.columns[columnIndex].isHighlighted = isHighlighted;

      // 更新 DOM
      this.$nextTick(() => {
        const cellEl = this.$refs.table.rows[0].cells[columnIndex]; // 假设第一行代表列标题
        cellEl.classList.toggle('highlighted-col', isHighlighted);
      });
    },
  },
};
</script>

这里我们假设每个列都有一个 `isHighlighted` 的布尔属性，当列头被点击时，会切换它的高亮状态。在实际项目中，你可能需要根据实际情况调整获取元素的方式。