element-ui table列表自定义表头，修改列标题样式、添加tooltip

亲测可用，若有疑问请私信

在之前的博客中，提到在element-ui table列表自定义表头，修改列标题样式、添加tooltip，需要render-header，但是在2.4.11及以后，element-ui官方已经更新了，并添加了自定义表头的方法

为了广大的群众少走弯路，我觉得还是有必要更新一下，如果element-ui版本是2.4.11以下，可以参考上个关于自定义表头的博客Element-ui自定义table表头，修改列标题样式、添加tooltip， :render-header使用简介
如果是2.4.11及以上版本就可以参考本文啦~

通过设置 Scoped slot 来自定义表头。
官方文档中描述通过设置 Scoped slot 来自定义表头，使用了vue中slot插槽的方法。
如果还不清楚slot是什么，怎么用可以先参考一下vue官网文档 vue插槽
用法示例：

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

这个用法还是很人性化也比较简单的，看看element-ui官方的文档完全可以掌握，但是本着负责任的态度，还是写一下

在这拿在表头添加一个tooltip作为示范，在名字的后面加个tooltip提示信息

<template>
<el-table
:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%">
<el-table-column
label="Date"
prop="date">
</el-table-column>
<el-table-column
prop="name">
<template slot="header" slot-scope="scope">
<span>名字</span>
<el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
<i class="el-icon-question"></i>
</el-tooltip>
</template>
</el-table-column>
<el-table-column
align="right">
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">Edit</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
</template>

代码都是Element-ui官方文档里的，仅作为参考使用，知道怎么用就可以了
效果如下：

element-ui table列表自定义表头，修改列标题样式、添加tooltip相关推荐

element ui table show-overflow-tooltip自定义样式
element ui table show-overflow-tooltip自定义样式在使用element ui table 组件时,表格td内容太多可设置show-overflow-tooltip ...
elementui表格中tip设置_Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用...
{column}) { return h( 'div',// 添加选中事件select (data) { console.log(data);}... 效果如下: 3.在表头添加一个Tooltip 我 ...
element ui table中想使得其中一列数据拥有横向滚动条的效果
给需要展示的内容创建一个盒子将其包裹住,在css样式中插入这3行属性即可 width:80px; white-space:nowrap; overflow-x:scroll
element ui table封装组件，render 函数动态事件设置
接着上一篇讲的,封装element ui table, 支持自定义列的展示和按照指定顺序展示自定义列需要在引用页面重新写一下,这样就可以定义化了,多数用于一些转换,或者操作列场景下,自行考虑即可,我 ...
element ui Table表格数据筛选功能实现
先来看看实现效果 element ui Table表格数据筛选功能实现查看Element官网关于筛选的实例. 在列中设置filters filter-method属性即可开启该列的筛选,filte ...
Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
element ui table组件筛选数据
需求:element ui table组件筛选全部数据 element ui 文档注意: 1. @filter-change 要写在table根元素,也就是<el-table @filter- ...
Element UI动态生成多级表头
1 基础常用的原型样例我们常常遇到的情况就是表头固定的,我们需要从后端获取对应表头的信息,如果信息比较多的时候为了方便我们展示,可以固定表头和列,下面是一个我们常见的例子: 固定列和表头可以同时使用 ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
element UI 表单自定义验证，css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证首先是element UI 提供的基础 ...

element-ui table列表自定义表头，修改列标题样式、添加tooltip

element-ui table列表自定义表头，修改列标题样式、添加tooltip相关推荐

最新文章

热门文章