在element-ui的表格组件中为表头添加Tooltip 文字提示

在使用表格组件的时候经常遇到的问题，列数很多，而表头的文字描述长度很长

 1 <el-table-column
 2         v-if="!column.event"
 3         v-for="(column, index) of columns"
 4         v-bind="column.bind"
 5         align="left"
 6         :key="index">
 7         <template slot-scope="scope" slot="header">
 8           <el-tooltip effect="dark" :content="column.needTips" placement="top"
 9                       :disabled="!column.needTips">
10             <span>{{column.bind.label}}</span>
11           </el-tooltip>
12         </template>
13       </el-table-column>

需要注意的是

<template slot-scope="scope" slot="header">

文档中有提示可使用通过设置 Scoped slot 来自定义表头。

posted @ 2019-02-19 17:39  心泪无恒  阅读(14767)  评论(0)  编辑  收藏  举报