element-plus中给el-table的表头上加注释

1,027 阅读1分钟

需求源源不断,代码越写越乱小菜鸡成长日记

el-table系列的需求又来啦~

有些时候表格的表头比较简洁或者是英文缩写,所以我们就需要给表头添加tip注释。

我们只需要将el-table-column的label属性去掉,然后使用插槽自定义表头内容就行啦

<el-table>
    <el-table-column show-overflow-tooltip align="center" prop="mttr" min-width="150">
      <template #header>
        <span>MTTR</span>
        <el-tooltip effect="light" content="设备故障平均恢复时间(min)" placement="top">
          <el-icon style="font-size: 15px; color: #ffc447; display: inline-block; padding-bottom: 20px">
            <svg-icon name="ep:question-filled"></svg-icon>
          </el-icon>
        </el-tooltip>
      </template>
    </el-table-column>
</el-table>

效果图: image.png