vue+element 表头说明文字

vue+element 表头说明文字

第一种直接hover 表头出现说明文字

html：

<el-table-column prop="last_result" label="上次评估结果" width="120" :render-header="renderHeader"></el-table-column>

js:

methods: {
      renderHeader(h, {column}) {
          return h(
          'div', [
              h('el-tooltip', {
                  props: {
                      effect: 'dark',
                      content: '测试测试',
                      placement: 'top',
                  },
              },
              [h('span',  column.label)])
          ]
          )
      },
 }

第二种hover 给表头添加图标，hover图标时出现说明

html:

<el-table-column prop="last_result" label="上次评估结果" width="120">
   <template slot="header">
     <span>测试1</span>
       <el-tooltip popper-class="tooltip" placement="top">
         <i class="el-icon-warning-outline"></i>
         <div slot="content" class="tooltip-content">
           <div>测试测试</div>
         </div>
       </el-tooltip>
   </template>
</el-table-column>