如何修改ElementUI表单与表格标签label样式

狂龙骄子2026-03-14 9:30

如何在 ElementUI 框架中修改 el-form-item 和 el-table-column 组件的 label 样式？对于表单项目，通过 el-form-item 的 slot 插槽功能重新定义label样式；对于列表列标题样式，使用 el-table-column 的 label-class-name属性指定CSS样式。

1、表单项目label

1.1、样式预览

运行环境：

Windows-10-BusinessEditions-22h2-x64
OracleJDK-1.8_u201、OracleJDK-11、OracleJDK-17
OpenJDK-8、OpenJDK-11+28、OpenJDK-17+35
IntelliJ IDEA Community Edition 2023.1.3
Maven-3.8.8
Node.js-16.17.0
Google Chrome-143.0.7499.170-x64

1、表单项目label

如何表单项目标签样式？利用表单项目组件 el-form-item 的插槽slot 功能，重新定义label的样式。如：

<template slot="label ">

<span class="text-danger">题目标题</span>

</template>

1.1、样式预览

1.2、代码举例

TypeScript 复制代码

<el-form ref="form" :model="form" :rules="rules" label-width="150px">
  <el-form-item label="题目标题" prop="questionName">
    <template slot="label">
      <span class="text-danger">题目标题</span>
    </template>
    <el-input v-model="form.questionName" placeholder="请输入题目标题" :rows="1" :maxlength="200" show-word-limit />
  </el-form-item>
</el-form>

2、列表头label

如何修改列表列标题样式？给列表列组件 el-table-column 添加 label-class-name 属性，并设置已定义的css样式，如： label-class-name="text-danger" 。

2.1、样式预览

2.2、代码举例

TypeScript 复制代码

<el-table ref="tables" stripe v-loading="loading" :data="dataList" @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
  <el-table-column label="题目标题" prop="questionName" align="center" width="120" label-class-name="text-danger" sortable="custom" :sort-orders="['descending', 'ascending']" />
</el-table>

3、实践总结

ElementUI框架有丰富的前端组件，遇到默认交互样式无法满足开发需求，可以先查看官方开发文档，是否已有属性可自定义；也可以查看框架源码，修改定制更多个性化的界面交互。

附录：