elementUI表格头部添加icon并且鼠标移入显示内容(render-header)


效果:

 

1、设置 render-header

<el-table-column prop="levelname" label="层次" width="180" show-overflow-tooltip :render-header="renderTableHeader" />

2、renderTableHeader 函数(放到methods中)

    renderTableHeader(h, { column }) {
      return h('div', [
        h('span', column.label),
        h('el-tooltip', { props: { placement: 'top' } }, [
          h(
            'div',
            {
              slot: 'content',
              style: { width: '220px', whiteSpace: 'normal' }
            },
            '选择学校层级后会进行层级描述的回填,也可以在层级描述里进行二次编辑'
          ),
          h('i', {
            class: 'el-icon-information',
            style: 'color:#ccc;margin-left:5px;cursor:pointer;'
          })
        ])
      ])
    }

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM