element ui el-table表头单独设置字体大小

 1.给el-table-column加上类名class-name

<el-table-column class-name="column" prop="program_name">
    <template slot-scope="{row}"><span>{{ row.program_name }}</span></template>
</el-table-column>

2.在css中设置字体大小

<style scoped lang="less">
::v-deep .column {
   .cell {
    font-size: 18px;
    }
}
</style>

  • 7
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-table 是一个基于 Element UI 的表格组件,在表格中固定表头可以提高用户的使用体验。在 Element UIel-table 中,设置表头固定可以通过设置 `fixed` 属性来实现,具体步骤如下: 1. 在 el-table设置 `height` 属性,即表格的高度,例如 `height: '400px'`。 2. 设置表头固定的方式有两种: - 将表头行的 `fixed` 属性设置为 `'top'`,例如: ``` <el-table :height="400" v-if="showTable" :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column prop="phone" label="电话"></el-table-column> <el-table-column fixed="top" label="操作"> <template slot-scope="scope"> <el-button type="text" size="small">编辑</el-button> </template> </el-table-column> </el-table> ``` - 将整个表格的 `header-fixed` 属性设置为 `true`,例如: ``` <el-table :height="400" v-if="showTable" :data="tableData" style="width: 100%" header-fixed> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column prop="phone" label="电话"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" size="small">编辑</el-button> </template> </el-table-column> </el-table> ``` 注意事项: - `fixed` 属性只能用于表头行(即 `<el-table-column>` 标签)。 - `header-fixed` 属性可以用于整个表格,如果使用这种方式,需要将表格的高度设置为固定值,否则表格会出现滚动条。 - 如果表格中有多个表头行,只需要将第一个表头行的 `fixed` 属性设置为 `'top'` 即可。 - 固定表头会增加表格的高度,需要根据实际情况调整表格的高度,以保证用户的使用体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值