elementui 自定义表头 renderHeader的写法给增加el-tooltip的提示

最新推荐文章于 2024-10-17 09:19:32 发布

原创最新推荐文章于 2024-10-17 09:19:32 发布 · 723 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui

本文介绍了如何在Element UI的el-table中实现列状态的动态渲染，并展示了renderHeader函数的应用，通过自定义tooltip为列头提供额外的解释。

<el-table-column prop="status" :render-header="renderHeader" >
    <template slot-scope="scope">{{scope.row.status}}</template>
</el-table-column>

  renderHeader(h, { column}) {
      return [
        column.property,
        h(
          'el-tooltip',
          {
            props: {
              content: (function() {
                return `${column.property}`
              })(),
              placement: 'top'
            }
          },
          [
            h('span', {
              class: {
                'el-icon-question': true
              }
            })
          ]
        )
      ]
    }