給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