el-table-column 字体大小

很抱歉，根据提供的引用内容，无法确定el-table-column的字体大小。引用中只提到了el-table-column的一些属性，但没有提到字体大小。引用中提到了tableStyle的字体大小为14px，但这个属性是用于整个表格的样式设置，而不是el-table-column的字体大小。引用中也没有提到el-table-column的字体大小。如果您需要设置el-table-column的字体大小，可以在el-table-column标签中添加style属性，并设置font-size属性来实现。

--相关问题--:
1. el-table-column还有哪些常用属性？
2. 如何在el-table中设置表头固定和滚动条？
3.

相关问题

el-table-column字体大小

### 回答1：
可以通过设置el-table-column的属性来调整字体大小，例如设置style属性中的font-size属性。例如：

<el-table-column prop="name" label="姓名" :style="{fontSize: '16px'}"></el-table-column>

### 回答2：
el-table-column 是 Element UI 中用于定义表格列的组件，其中的字体大小可以通过设置 CSS 样式来调整。

在 el-table-column 组件中，可以通过设置 `labelClassName`、`className`、`headerClassName` 属性来为表格列元素设置样式类，进而通过 CSS 样式来调整字体大小。

例如，在 el-table-column 中设置 `labelClassName` 属性，将其指定为一个样式类，然后在 CSS 文件中定义这个样式类的字体大小，就可以调整表格列中文本的大小：

<el-table-column prop="name" label="姓名" :labelClassName="'my-label'"></el-table-column>

.my-label {
  font-size: 16px;
}

除了设置样式类来调整字体大小，还可以直接在 el-table-column 组件中指定 style 样式，如下所示：

<el-table-column prop="name" label="姓名" :style="{fontSize:'16px'}"></el-table-column>

但是，直接指定样式的方式会使得组件的可重用性和维护性下降，因此建议还是通过设置样式类的方式来调整字体大小。

### 回答3：
el-table-column是Element UI中的一个表格列组件，它可以用来定义表格中每一列的样式、数据格式等属性。其中字体大小是表格列组件中的一个重要属性，可以通过设置该属性来控制表格中文字的大小。在Element UI中，可以通过以下两种方式来设置el-table-column的字体大小。

一、全局样式配置

Element UI提供了全局样式配置的功能，可以通过在代码中设置全局样式来控制el-table-column组件的字体大小。具体操作方式如下：

1.在Vue.js组件中引入Element UI的全局样式文件：

import ‘element-ui/lib/theme-chalk/index.css’;

2.在Vue.js组件中定义全局样式：

<style scoped>

.el-table__body td,

.el-table__header th {

font-size: 14px;

}

</style>

上述全局样式代码中，通过设置“.el-table__body td”和“.el-table__header th”选择器的“font-size”属性来控制表格中字体的大小。这种方式可以很方便地实现对整个表格中字体大小的统一设置。

二、局部样式配置

除了全局样式配置外，还可以在el-table-column组件中独立设置字体大小。具体操作方式如下：

1.在el-table-column组件中设置样式属性：

<el-table-column prop=“name” label=“姓名” :min-width=“100”

:style=“{‘font-size’: ‘14px’}”></el-table-column>

上述代码中，通过在el-table-column组件中设置“style”属性并设置“font-size”属性的值，来控制该列中字体的大小。这种方式可以针对不同的列设置不同的字体大小，灵活性较高。

综上所述，el-table-column组件的字体大小可以通过全局样式配置和局部样式配置两种方式来实现，具体选择哪一种方式取决于实际需求。

<template> <el-container style="height: 100%"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="index" label="考核指标" :header-cell-style="{backgroundColor: '#ff0000'}" width="110"></el-table-column> <el-table-column prop="ymatter" label="具体事项（原）" :header-cell-style="{backgroundColor: '#00ff00'}"></el-table-column> <el-table-column label="具体事项（新）" prop="xmatter"> <el-table-column prop="point" label="考核要点"></el-table-column> <el-table-column prop="method" label="计分方法"></el-table-column> <el-table-column prop="target" label="考核目标" width="200"></el-table-column> </el-table-column> <el-table-column prop="cycle" label="考核周期" :header-cell-style="{backgroundColor: '#0000ff'}" width="50"></el-table-column> </el-table> </el-container> </template>给这个表格美化的显眼点

你可以尝试在表头中添加图标或者字体图标，让它更加显眼。例如，可以在考核指标列的表头单元格中添加一个 `el-icon-warning-outline` 的图标，表示这一列是比较重要的内容；在考核周期列的表头单元格中添加一个 `el-icon-date` 的图标，表示这一列是和日期相关的内容。同时，你也可以尝试添加一些过渡效果，比如当鼠标悬停在单元格上时，让单元格的背景色变化，增加一些交互效果。下面是一个例子：

<template>
  <el-container style="height: 100%">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="index" label="考核指标" :header-cell-style="{backgroundColor: '#ff0000'}" width="110">
        <template slot="header">
          <i class="el-icon-warning-outline"></i>
          考核指标
        </template>
      </el-table-column>
      <el-table-column prop="ymatter" label="具体事项（原）" :header-cell-style="{backgroundColor: '#00ff00'}"></el-table-column>
      <el-table-column label="具体事项（新）" prop="xmatter">
        <el-table-column prop="point" label="考核要点"></el-table-column>
        <el-table-column prop="method" label="计分方法"></el-table-column>
        <el-table-column prop="target" label="考核目标" width="200"></el-table-column>
      </el-table-column>
      <el-table-column prop="cycle" label="考核周期" :header-cell-style="{backgroundColor: '#0000ff'}" width="50">
        <template slot="header">
          <i class="el-icon-date"></i>
          考核周期
        </template>
      </el-table-column>
    </el-table>
  </el-container>
</template>

<style>
  .el-table__row:hover {
    background-color: #f5f5f5;
  }
</style>

这个例子中，我们在考核指标列和考核周期列的表头中分别添加了一个图标和文字，让它们更加显眼。同时，在 CSS 中定义了当鼠标悬停在单元格上时，单元格的背景色变成浅灰色，增加了一些过渡效果。你可以根据需要修改图标和颜色等样式，或添加其他交互效果。