Element-UI 修改列标题样式 :render-header="renderHeader"

官方文档关于render-header的解释如下:

 具体实现如下:

//页面组件
<el-table-column
  prop="Name"
  label="姓名"
  :render-header="renderHeader"
  >
</el-table-column>

//组件的method方法
renderHeader(h,para) {
  //该列的绑定数据
  console.log(para.column)
  //列号
  console.log(para.$index)    
     return (
        h('span',[
          h('el-checkbox',{
            props: {
              ……
            }
          }),
          h('span',para.column.label)
        ])
     )
}

 

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要自定义Element-ui组件的样式,你可以使用以下方法: 1. 通过修改全局的CSS样式来自定义Element-ui组件的样式。你可以在项目的CSS文件添加对应组件的类名,然后重写相应的样式规则来实现自定义样式效果。例如,如果你要自定义Table组件的表头样式,你可以给表头所在的元素添加一个类名,并在CSS文件为这个类名定义新的样式规则。 2. 使用Element-ui提供的自定义主题功能来修改组件的样式。你可以通过在项目创建一个新的主题文件,并在该文件修改对应组件的样式变量来实现自定义样式效果。具体的步骤和方法可以参考Element-ui官方文档关于自定义主题的部分。 3. 使用Element-ui提供的CSS作用域或样式作用域来限定组件样式的作用范围。Element-ui的组件在渲染时会自动添加一个唯一的class作为样式作用域,你可以通过在对应组件的父级元素上添加一个类名,并在CSS文件使用该类名限制样式作用范围。 希望以上方法能帮助到你自定义Element-ui组件的样式。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [Element-ui自定义table表头、修改标题样式、添加tooltip、:render-header使用](https://download.csdn.net/download/weixin_38729022/12944226)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作](https://download.csdn.net/download/weixin_38542223/13125838)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值