el-table 自定义表头label

最新推荐文章于 2024-07-31 16:29:53 发布

九分库

最新推荐文章于 2024-07-31 16:29:53 发布

阅读量2.8k

点赞数

分类专栏：功能文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_52912134/article/details/127728521

版权

功能专栏收录该内容

48 篇文章 0 订阅

订阅专栏

在这里插入图片描述
属性加:render-header=“renderHeader”

<el-table-column
          align="center"
          :render-header="renderHeader"
          label="安全组ID"
          width="200"
          prop="dsgTeamId"
        ></el-table-column>

    renderHeader(h, { column, $index }) {
      console.log(column, $index)
      return h('div', {}, [
        h('span', '安全组ID'),
        h(
          'el-tooltip',
          {
            props: {
              placement: 'right',
            },
            style: {
              marginLeft: '5px',
            },
          },
          [
            h(
              'span',
              {
                slot: 'content', // slot属性
                style: {
                  display: 'inline-block',
                  maxWidth: '120px',
                  whiteSpace: 'normal',
                  wordBreak: 'break-all',
                },
              },
              '安全组ID是系统随机生成的8位包含数字和字母的ID'
            ),
            h('i', {
              class: 'el-icon-info',
            }),
          ]
        ),
      ])
    },