ElementUI中利用table表格自定义表头Tooltip文字提示

目录

• 实现效果
• ElementUI文档
• el-table组件
• tooltip组件
• render-header绑定的方法

实现效果

ElementUI文档

el-table组件

tooltip组件

render-header绑定的方法

 // 自定义表格
    // 例如：给表头 地址 加一个 icon，鼠标移入icon展示提示信息
    renderHeaderMethods(h, { column }, message) {
      return h('div', { style: 'display:inline-block;margin:auto;' }, [
        h('span', column.label),
        h('SpmonTootip', {
          // 引用组件
          props: {
            // messages 里面配置的信息即为 Tooltip 提示信息
            messages: [message]
          }
        })
      ])
    },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。