由于项目需要,使用element-ui来渲染的表头已经不能够满足需要,想过使用:show-header=“false” 将表头隐藏来实现自定义,但是需要用到它的排序,就用不了,最后发现element-ui已经有对应的API提供给我们,那就是 render-header。

具体使用方法:在对应的 添加render-header属性:
示例:

<el-table-column :label="CODE" prop="code" :render-header="renderHeader"></el-table-column>

具体的renderHeader方法:

renderHeader(h,{column,$index}){
  return h('div',{
    attrs:{
      class:'cell',
    },
    domProps:{
      innerHTML:'<span class="red">*</span>'+column.label
    }
  })
},

实现效果:
在这里插入图片描述
这样就实现了,自定义表头模板了。

以下是小弟创业项目:昆明网站建设

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐