element-ui自定义table表头,修改列标题样式
elementUI table表格一般的样式是这样的:
但是要改变表头是比较麻烦的一个事情,但是往往有些项目是需要的比如改成如下样式:
一般直接改起来挺麻烦,好在官网提供了一个方法:render-header
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | — | — |
根据官方的方法来实现有两个方法:
方法一:vue的render函数来直接实现
<template>
<div>
<h2 align="center">自定义表头样式</h2>
<el-table :data="tableData" border stripe>
<el-table-column prop="name" label="姓名" align="center" :render-header="renderHeader">
</el-table-column>
<el-table-column prop="date" label="日期" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
</el-table>
</div>
</template> <script>
export default {
data() {
return {
tableData: [{
name: '王小虎',
date: '2016-05-02',
address: '上海市普陀区金沙江路 1518 弄'
}, {
name: '王老五',
date: '2016-05-04',
address: '上海市普陀区金沙江路 1517 弄'
}],
tableHeader: [{
prop: 'name',
label: '姓名'
}, {
prop: 'date',
label: '时间'
}, {
prop: 'address',
label: '地址'
}],
}
},
methods: {
renderHeader(h, {column, $index}) {
// 这里在最外层插入一个div标签
return h('div',[// h即为cerateElement的简写
// 在div里面插入span
h('span', {
// 表示内容
domProps:{
innerHTML:column.label
},
on: {
click: () => {
console.log(`${column.label} ${$index}`)
}
}
}),
h('el-tooltip',{
// 表示属性
attrs: {
effect: "dark",
content: "备注信息",
placement: "top"
},
},[
h("i", {
'class': 'el-icon-warning table-msg'
})
])
])
},
}
}
</script>
运行效果:
对上面方法还有需要改进的地方,有时候在自定义的时候内容过于复杂,这个时候可以把内容都放到组件里面,在引进来插入进去。例如:
<!-- 使用PromptMessage.vue的组件 自定义表头 -->
<template>
<el-tooltip effect="dark" placement="top">
<div slot="content">
<span v-for="item in messages" :key="item">
{{item}}
</span>
</div>
<i class="el-icon-question" style="color:#409eff;font-size:15px;"></i>
</el-tooltip>
</template>
<script>
export default {
name:'promptMessage',
props:['messages']
};
</script>
<style scope> </style>
<!-- 新建名为 PromptMessage.vue 的组件 -->
<template>
<div>
<h2 align="center">自定义表头样式</h2>
<el-table :data="tableData" border stripe>
<el-table-column prop="name" label="姓名" align="center" :render-header="renderHeader">
</el-table-column>
<el-table-column prop="date" label="日期" align="center" :render-header="renderHeaderTwo">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
</el-table>
</div>
</template> <script>
/*
局部引入组件,也可以全局引入,在main.js import promptmessage from '路径/PromptMessage.vue'
Vue.component('promptmessage', promptmessage)
*/
import promptmessage from './PromptMessage.vue'
export default {
data() {
return {
tableData: [{
name: '王小虎',
date: '2016-05-02',
address: '上海市普陀区金沙江路 1518 弄'
}, {
name: '王老五',
date: '2016-05-04',
address: '上海市普陀区金沙江路 1517 弄'
}],
tableHeader: [{
prop: 'name',
label: '姓名'
}, {
prop: 'date',
label: '时间'
}, {
prop: 'address',
label: '地址'
}],
}
},
methods: {
renderHeader(h, {column, $index}) {
// 这里在最外层插入一个div标签
return h('div',[// h即为cerateElement的简写
// 在div里面插入span
h('span', {
// 表示内容
domProps:{
innerHTML:column.label
},
on: {
click: () => {
console.log(`${column.label} ${$index}`)
}
}
}),
h('el-tooltip',{
// 表示属性
attrs: {
effect: "dark",
content: "备注信息",
placement: "top"
},
},[
h("i", {
'class': 'el-icon-warning table-msg'
})
])
])
},
renderHeaderTwo(h, {column, $index}) {
return h('div', [
h('span', {
domProps:{
innerHTML:column.label
}
}),
h(promptmessage, {
props: {messages: ["备注信息2"]},
style: {
'cursor': 'pointer',
}
})
])
},
}
}
</script>
效果图:注意promptmessage已经是自定义组件(标签),所以不需要加引号。
方法二:直接使用JSX语法,此方法最简单,但是必须安装编译插件
详细细心去官网看吧。
1. 先安装JSX语法编译工具:
npm install\
babel-plugin-syntax-jsx\
babel-plugin-transform-vue-jsx\
babel-helper-vue-jsx-merge-props\
babel-preset-es2015\
--save-dev
2. 配置.babelrc文件:
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}
3. 编写代码:
<template>
<div>
<h2 align="center">自定义表头样式</h2>
<el-table :data="tableData" border stripe>
<el-table-column prop="name" label="姓名" align="center" :render-header="renderHeader">
</el-table-column>
<el-table-column prop="date" label="日期" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
</el-table-column>
</el-table>
</div>
</template> <script>
export default {
data() {
return {
tableData: [{
name: '王小虎',
date: '2016-05-02',
address: '上海市普陀区金沙江路 1518 弄'
}, {
name: '王老五',
date: '2016-05-04',
address: '上海市普陀区金沙江路 1517 弄'
}],
tableHeader: [{
prop: 'name',
label: '姓名'
}, {
prop: 'date',
label: '时间'
}, {
prop: 'address',
label: '地址'
}],
mesHtml:'只是一个提示'
}
},
methods: {
renderHeader(h, {column, $index}) {
return(
<div>
<span>{column.label}</span>
<el-tooltip class="tooltip" effect="dark" placement="top">
<div slot="content">
<span onClick={this.handleClick}>{this.mesHtml}</span>
</div>
<i class="el-icon-question"></i>
</el-tooltip>
</div>
)
},
handleClick(){
alert('点击')
}
}
}
</script>
运行效果如下,具体jsx语法就不做多介绍了。
element-ui自定义table表头,修改列标题样式的更多相关文章
- element-ui自定义table表头,修改标题样式、添加tooltip及 :render-header使用简介
修改列标题样式1.在列标题后面加一个图标. 以element-ui官方文档一个table表格为例,我们在地址的后面加一个定位标志的图标,代码如下: <template> <el-ta ...
- (Element UI 组件 Table)去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- DataTable 删除列 调整列顺序 修改列标题名称
DataTable dt = new DataTable(); //删除列 dt.Columns.Remove("Sex"); dt.Columns.Remove("Ag ...
- element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
- Joomla - 自定义(自定义模块、修改原有模块样式、添加全局JS)
一.自定义模块 自定义模块 参考 Joomla - 模块系统(新建模块.模块类别.自定义模块)第三点 自定义模块部分 自定义模块布局 参考 Joomla - T3模板(非常好用的4屏响应式模板) 的第 ...
- 怎么样使element ui 的table某列变色
第一步.在el-table里面加上:row-style="rowClass" <el-table :data="targetCarList" border ...
- element ui的table的头部自定义
<el-table-column label="级别" min-width="120" prop="clueLevel" align= ...
- Element UI的Table用法
Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...
- element-ui自定义table表头
场景描述: 这个需求的场景很简单,表头自定义居中显示 <el-table-column show-overflow-tooltip prop="telephone" labe ...
随机推荐
- 登录linux,输入ls显示anaconda-ks.cfg cobbler.ks ....., 原因在于root@ ~ / 区别
今天登录linux测试机,想要创建目录,ls的时候,找不到之前的的目录,才发现是目录不对的问题. 首先,先要弄清楚 [root@330c353813ea ~] 和 [root@330c353813ea ...
- HighCharts 图表插件 自定义绑定 时间轴数据
HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...
- socket 的通信过程
1.建立套接字 Linux在利用socket()系统调用建立新的套接字时,需要传递套接字的地址族标识符.套接字类型以及协议,其函数定义于net/socket.c中: asmlinkage long s ...
- Illegal instruction 问题的解决方法
写的程序在一些arm板子上可以运行, 可在一些板子上出现 Illegal instruction 这个一般是 arm指令不匹配的问题. 在编译参数中, 加上 -march=armv4t 就可以解决 ...
- vc++如何创建程序-构造函数02
1.若忘记了赋值,出现运行结果是很大的负值(因为我们定义的x与y这两个成员变量存储在内存中是一个随机的值) 当我们调用时,随机输出. //包含输入输出的头文件#include<iostream. ...
- Zabbix系列-REHL6.10离线方式安装Zabbix 4.0 LTS
环境 第零步:关闭系统默认防火墙 setenforce 0 sed -i -r "/^SELINUX=/c SELINUX=disabled" /etc/selinux/confi ...
- elasticsearch的核心概念
1.elasticsearch的核心概念 (1)Near Realtime(NRT):近实时,两个意思,从写入数据到数据可以被搜索到有一个小延迟(大概1秒):基于es执行搜索和分析可以达到秒级 (2) ...
- Centos 搭建activemq
Centos 搭建activemq 1,官方下载 http://activemq.apache.org/activemq-5122-release.html apache-activemq-5.15 ...
- 佛祖保佑,永不宕机,永无 Bug
转自:http://top.jobbole.com/17580/ 佛祖保佑,永不宕机,永无 Bug 为何服务器频遭黑客攻击?为何系统频频宕机,别人家系统却稳如泰山,坚如磐石?为何运维人员和系统管理员行 ...
- http协议的状态码(200,404,503)
http协议的状态码 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态码. 100(继续) 请求者应当继续提出请求.服务器返回此代码表示已收到请求的第一部分,正在等待其余部分. 101( ...