el-table 表头添加Tooltip render-header动态传参

给el-table表头添加Tooltip,光标移动到表头问号区域,自动弹出tooltip提示
render-header传参方式

   <el-table-column
          prop="usedCredit"
          label="已占授信额度(元)"
          width="140"
          header-align="center"
          align="center"
          :render-header="
            (h, obj) =>
              renderHeader(
                h,
                obj,
                '授信列表(正常状态的【授信额度(元)】)+ 授信列表(逾期状态的【待还本金金额(元)】'
              )
          "
        >
        </el-table-column>

js

    // 表头增加问号❓
    renderHeader(h, { column, $index }, content_desc) {
      return [
        column.label,
        h(
          'el-tooltip',
          {
            props: {
              content: content_desc,
              placement: 'top',
            },
          },
          [h('span', { class: { 'el-icon-question': true } })]
        ),
      ]
    },
posted @ 2024-04-09 11:40  qqcc1388  阅读(445)  评论(0编辑  收藏  举报