element ui el-table 表头字体加粗

  :header-cell-style="  { background: '#F0F0F1', height: '40px' ,fontSize:'18px',color:'black',fontweight:400}"

刚开始是这样写的,发现fontweight不管设置成神魔都不生效,所以这种写法是错误的

 :header-cell-style="tableHeaderColor"


methods:{
  tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F1;color:black;font-size:18px;font-weight: 900;'
      }
      },
}

正确的写法是这样的

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
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'` 即可。 - 固定表头会增加表格的高度,需要根据实际情况调整表格的高度,以保证用户的使用体验。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值