el-table-column修改样式

`el-table-column` 是 Element UI 中用于定义表格列的组件。修改其样式可以通过多种方式实现，包括使用内联样式、自定义类名、作用域插槽等。下面是一个简单的例子：

1. 使用 `class` 或 `style` 属性直接在 `el-table-column` 上添加样式或类名。例如：

<el-table :data="tableData">
  <el-table-column prop="date" label="日期" width="180">
    <template slot-scope="scope">
      <span :style="{'color': scope.row.isWeekend ? 'red' : ''}">{{ scope.row.date }}</span>
    </template>
  </el-table-column>
  <!-- 其他列 -->
</el-table>

在这个例子中，我们通过 `slot-scope` 获取当前行数据，并为日期列的文本添加了条件样式。

2. 利用作用域插槽（slot-scope）。作用域插槽可以让我们访问到当前行（`row`）、当前列（`column`）、当前单元格的值（`$index`）等信息。例如：

<el-table :data="tableData">
  <el-table-column label="自定义列">
    <template slot-scope="scope">
      <div :class="{'custom-class': true}">
        {{ scope.row.customField }}
      </div>
    </template>
  </el-table-column>
  <!-- 其他列 -->
</el-table>

在这里，通过添加自定义类名，可以在 CSS 中定义样式，然后应用到这个特定的单元格上。

3. 使用 CSS 选择器直接操作样式。比如，你可以直接针对 `el-table-column` 中的某个单元格或者某个特定列定义样式。

/* 为所有日期列的文本添加红色样式 */
.el-table .el-table-column--date .cell {
  color: red;
}

/* 为特定列添加样式 */
.el-table .el-table-column--name .cell {
  background-color: yellow;
}

注意，直接使用 CSS 选择器修改样式可能会影响其他不相关的元素，特别是在使用动态类名或者 Element UI 升级后，选择器路径可能发生变化。