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

 <el-table-column
v-if="!column.event"
v-for="(column, index) of columns"
v-bind="column.bind"
align="left"
:key="index">
<template slot-scope="scope" slot="header">
<el-tooltip effect="dark" :content="column.needTips" placement="top"
:disabled="!column.needTips">
<span>{{column.bind.label}}</span>
</el-tooltip>
</template>
</el-table-column>

需要注意的是

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

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

在element-ui的表格组件中为表头添加Tooltip 文字提示的更多相关文章

  1. iview 如何在表格中给操作图标添加Tooltip文字提示?

    项目需要用到的iview 表格中操作项目有各种各样的图标,而各种各样的图标代表不同的操作,面对新用户可能很懵,那如何给这些图标添加Tooltip文字提示? 废话不多讲,直接看代码: <templ ...

  2. element ui设置表格表头高度和每一行的高度

    填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...

  3. vue问题三:element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

  4. ElementUI2.0组件库el-table表格组件如何自定义表头?

    效果图: npm run dev 编译项目之后,报错,要使用jsx语法需要先安装编译插件 1.安装下列安装包 npm install babel-plugin-syntax-jsx --save-de ...

  5. React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路

    React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...

  6. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  7. element UI实现表格中添加开关控制按钮

    我使用的是element ui V1.4.3 如下图是我要实现的效果: <template> <div> <el-button type="text" ...

  8. Vue+element UI实现表格数据导出Excel组件

    介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...

  9. element UI 调整表格行高

    使用element UI的table默认属性,绘制表格如下: 该表格的行高太大了,于是想调小一些. 查看官网的文档,table有几个属性, row-style:行的 style 的回调方法,也可以使用 ...

随机推荐

  1. 查看物料凭证MB03 /MIGO A04-显示,R02-物料凭证

    当货物移动操作后,可以使用事物码MB03.MIGO查询最近一次生成的物料凭证, 如果未知凭证号,Table:MKPF / AUFM/EKBE MKPF 抬头:物料凭证 KEY: MBLNR 物料凭证编 ...

  2. iOS 分享功能开发

    iOS 开发过程中可能会遇到需要进行第三方分享的需求,比如向QQ,微信,微博等分享 如下图 我们今天要讲到的方式是使用了一个第三方工具: http://www.sharesdk.cn 一,注册账号 去 ...

  3. elementaryos必装软件

    所使用版本:elementaryos-0.4-stable-amd64.20160909.iso vmtools jdk sougouinput IntellijIEAD

  4. <tx:advice/> 有关的设置

    将描述通过 <tx:advice/> 标签来指定不同的事务性设置.默认的 <tx:advice/> 设置如下: 事务传播设置是 REQUIRED 隔离级别是 DEFAULT 事 ...

  5. 2017SN多校D1T1 loveletter:模拟

    题意: 两张n*m的纸.一张透明纸,上面有些地方是黑的,有些地方是透明的.另一张纸上写满了字母. 你需要将透明纸放在写字的纸上,分别顺时针旋转0°.90°.180°.270°,每次从上到下.从左到右写 ...

  6. Visual Studio 2012 与此版本的 Windows 不兼容 解决

    警告: [Window Title] 程序兼容性助手[Main Instruction] 此程序存在已知的兼容性问题[Expanded Information] Visual Studio 2012 ...

  7. [acm]HDOJ 1200 To and Fro

    题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=1200 简单字符串处理,找规律 /* 11509672 2014-08-21 11:32:55 Acc ...

  8. Unity-2017.3官方实例教程Space-Shooter(二)

    由于初学Unity,写下此文作为笔记,文中难免会有疏漏,不当之处还望指正. Unity-2017.3官方实例教程Space-Shooter(一) 章节列表: 一.创建小行星Prefab 二.创建敌机和 ...

  9. Stop logging "internal dummy connection" in Apache

    Apache 2.x keeps child processes alive by creating internal connections which appear in the log file ...

  10. dmidecode 命令

    dmidecode                                                 #  查看全面硬件信息dmidecode | grep "Product ...