给element-ui的table表的表头添加tooltip提示语


1、效果

2、element的table中

<el-table-column prop="hour" label="生存状态" :render-header="renderHeader"/>

3、methods中添加renderHeader方法

renderHeader(h,{column}) {
        return h('div',[
          h('span', column.label),
          h('el-tooltip',{undefined,
            props:{undefined,
              effect:'dark',
              content:"死亡:点击可查看死亡信息;正常:点击更改人员生存状态",
              placement:'top',
            },
          },
          [h('i', {undefined,
            class: 'el-icon-question',
            style: "color:#409eff;margin-left:5px;cursor:pointer;"
          })],
          {content:"死亡:点击可查看死亡信息;正常:点击更改人员生存状态"})

          ]);
      },

4、换行【自行调整宽度即可】

  .el-tooltip__popper {
    max-width: 400px !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    word-break: break-all !important;
  }

5、input后面提示

<el-tooltip placement="top">
    <div slot="content">注意:务必核实无误后上传,否则影响CA电子签章生成</div>
    <i class="el-icon-question" />
</el-tooltip>


免责声明!

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



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