element-ui自定义table表头,修改标题样式、添加tooltip及 :render-header使用简介
修改列标题样式
1.在列标题后面加一个图标。
以element-ui官方文档一个table表格为例,我们在地址的后面加一个定位标志的图标,代码如下:
<template>
<el-table
:data="tableData2"
style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址"
:render-header="renderHeader"> // 加入render事件
</el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
// render 事件
renderHeader (h,{column}) { // h即为cerateElement的简写,具体可看vue官方文档
return h(
'div',[
h('span', column.label),
h('i', {
class:'el-icon-location',
style:'color:#409eff;margin-left:5px;'
})
],
);
}
},
data() {
return {
tableData2: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
}
}
}
</script>
效果如下:
2.在列标题后面添加一个单选框
还是以上面的代码为例,只写关键代码:
// render 事件
renderHeader (h,{column}) { // h即为cerateElement的简写,具体可看vue官方文档
return h(
'div',[
h('span', column.label),
h('el-checkbox',{
style:'margin-left:5px',
on:{
change:this.select // 选中事件
}
})
],
);
},
// 添加选中事件
select (data) {
console.log(data);
}
效果如下:
3.在表头添加一个Tooltip
现在有一个需求,要在列表表题后面添加一个提示,我们开始尝试着做,还是以上面的代码为例,刚开始我想直接用‘el-tooltip’,应该不是很难,然后就是这样:
renderHeader (h,{column}) {
return h(
'div', [
h('span', column.label),
h('el-tooltip',[
h('i', {
class:'el-icon-question',
style:'color:#409eff;margin-left:5px;'
})
],{
content: '这是一个提示'
})
]
);
}
运行后发现,基本样式出来了,但是提示没有,效果如下:
这样肯定不能满足我们的要求,后来经过自己不断的尝试,发现这样写就可以了
renderHeader (h,{column}) {
return h(
'div',[
h('span', column.label),
h('el-tooltip',{
props:{
effect:'dark',
content:'这是一个提示',
placement:'top'
},
},[
h('i', {
class:'el-icon-question',
style:'color:#409eff;margin-left:5px;'
})
],{
content: '这是一个提示'
})
]
);
}
element-ui自定义table表头,修改标题样式、添加tooltip及 :render-header使用简介的更多相关文章
- (Element UI 组件 Table)去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- 在Word中为标题样式添加自动编号功能
原文地址:http://blog.chinaunix.net/uid-16685753-id-2738270.html 摘要: 本文可以帮助你在Office 2007中为Word标题样式添加和设置自动 ...
- element-ui自定义table表头,修改列标题样式
elementUI table表格一般的样式是这样的: 但是要改变表头是比较麻烦的一个事情,但是往往有些项目是需要的比如改成如下样式: 一般直接改起来挺麻烦,好在官网提供了一个方法:render-he ...
- element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
- element.ui 自定义样式问题
方法有很多种 自定义类名 <el-button class="search_button" @click="search">查询</el-bu ...
- element ui的table的头部自定义
<el-table-column label="级别" min-width="120" prop="clueLevel" align= ...
- 页面定制CSS代码初探(二):自定义h2标题样式 添加阴影 添加底色 等
故事的开始 先说一下<h2></h2>原先默认是空白的,很难看 然后今天无意中看到一个博友的标题很好看啊,一直就想要这种效果有没有? 好的东西自然要拿过来啦 通过审查元素,果然 ...
- Element UI的Table用法
Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...
- element-ui自定义table表头
场景描述: 这个需求的场景很简单,表头自定义居中显示 <el-table-column show-overflow-tooltip prop="telephone" labe ...
随机推荐
- 熬夜之作:一文带你了解Cat分布式监控
Cat 是什么? CAT(Central Application Tracking)是基于 Java 开发的实时应用监控平台,包括实时应用监控,业务监控. CAT 作为服务端项目基础组件,提供了 Ja ...
- 从零开始的Spring Boot(3、Spring Boot静态资源和文件上传)
Spring Boot静态资源和文件上传 写在前面 从零开始的Spring Boot(2.在Spring Boot中整合Servlet.Filter.Listener的方式) https://www. ...
- 弹出框Alert
selenium提供了三个处理alert的方法 注意:首先需要切换窗口到alert driver.switch_to.alert() (1)点击确定按钮 driver.switch_to.alert. ...
- Java8新特性之方法引用
<Java 8 实战>学习笔记系列 定义 方法引用让你可以重复使用现有的方法定义,并像Lambda一样传递它,可以把方法引用看作针对仅仅涉及单一方法的Lambda的语法糖,使用它将减少自己 ...
- Ngnix 配置文件快速入门
转自https://www.cnblogs.com/knowledgesea/p/5175711.html 其实也没什么好说的,我想大部分人也不会在意nginx的实现原理啥的.服务器要部署的时候,把n ...
- 黎活明8天快速掌握android视频教程--27_网络通信之通过GET和POST方式提交参数给web应用
1该项目主要实现Android客户端以get的方式或者post的方式向java web服务器提交参数 Android客户端通过get方式或者post方式将参数提交给后台服务器,后台服务器对收到的参数进 ...
- SpringMVC 学习笔记(六)拦截器
5.1.处理器拦截器简介 Spring Web MVC的处理器拦截器(如无特殊说明,下文所说的拦截器即处理器拦截器) 类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理. ...
- 几个超级实用但很少人知道的 VS 技巧
大家好,今天分享几个我知道的实用 VS 技巧,而这些技巧我发现很多人都不知道.因为我经常在工作中遇到:我在同事电脑上解决问题,或在会议上演示代码示例时,使用了一些 VS "骚"操作 ...
- .NET高级调试系列-Windbg调试入门篇
Windbg是.NET高级调试领域中不可或缺的一个工具和利器,也是日常我们分析解决问题的必备.准备近期写2篇精华文章,集中给大家分享一下如果通过Windbg进行.NET高级调试. 今天我们来一篇入门的 ...
- Flask02-Template
## 基础使用 $ vim app/templates/index.html > <html> > <head> > <title>{{title ...