Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用


Posted in Javascript onApril 11, 2019

render-header

render-header在官方文档中的介绍是这样的:

参数 说明 类型 可选值 默认值
render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index })

修改列标题样式

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>

<style>
 .el-table .warning-row {
 background: oldlace;
 }

 .el-table .success-row {
 background: #f0f9eb;
 }
</style>

<script>
 export default {
 methods: {
  tableRowClassName({row, rowIndex}) {
  if (rowIndex === 1) {
   return 'warning-row';
  } else if (rowIndex === 3) {
   return 'success-row';
  }
  return '';
  },
  // 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>

效果如下:

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

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);
}
...

效果如下:

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

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: '这是一个提示'
  })
 ]
 );
}
...

运行后发现,基本样式出来了,但是提示没有

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

根据element-ui 关于tooltip的文档,我发现不管是effect, content还是placement对tooltip都不管用,既然硬上不管用,就曲线救国,通过组件的方法,先造个轮子再走路

// 写一个PromptMessage的组件,并全局注册
<template>
 <div class="tooltip">
 <el-tooltip effect="dark" placement="right">
  <div slot="content"> // 插槽,可提供多行的提示信息
  <p v-for="item in messages" :key="item">
   {{item}}
  </p>
  </div>
  <i class="el-icon-question" style="color:#409eff;margin-left:5px;font-size:15px;"></i>
 </el-tooltip>
 </div>
</template>

<script>
 export default {
 props:['messages']
 };
</script>

然后在render-header事件中使用组件

...
renderTip (h,{column}) {
 return h(
 'div',{
  style:'display:flex;margin:auto;'
 },
 [
  h('span', column.label),
  h('prompt-message', {
  props: {messages: ["这是住址信息"]}
  })
 ]
 );
}
...

这次我们发现,果然造的轮子还是挺不错的

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

JSX语法

或许你会发现,这个原生的createElement 写起来并不简单,而且很费事,我们也可以采用JSX的方式,这个在Vue官方文档中有提到

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

查看文档,可以找到安装使用的方法

Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用

安装完成后想要再实现tooltip就简单了

...
renderTip (h,{column}) {
 return (
 <el-tooltip class="tooltip" effect="dark" placement="right">
  <ul slot="content">
  <li>这是第一个提示</li>
  <li>这是第二个提示<li>
  </ul>
  <i class="el-icon-question"></i>
 </el-tooltip>
 );
}
...

这样看着很好理解,写起来也很方便

补充:

最近有个需求,需要在每次对el-table的单项进行勾选时,使用@select-change去调取后台接口,更改表格数据。

然而,el-table的selection列有个大bug。

首先,获取后的数据对于el-table的selection列来说,没有字段props可以去接收,这就导致没有数据是选中的,会直接触发@select-change方法,回调参数val为[]。

其次,selection需要使用toggleSelection方法去更改,当更改时,又一次触发@select-change方法,这显然不符合需求。

因此,需要自定义table的表头信息,设置为el-checkbox。

代码如下

// 自定义表头select
 renderHeader(h, {column, $index}) {
  return h("span", {}, [
  h('el-checkbox',{
   props: {
   checked: this.allchecked 
   },
   on:{
   change: this.updateAllSelected // 选中事件 
   }
  })]);
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript分页代码实例分享(js分页)
Dec 13 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
Express使用html模板的详细代码
Sep 18 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
Vue实现开关按钮拖拽效果
Sep 22 Javascript
如何检查一个对象是否为空
Apr 11 #Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 #Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 #Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 #Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 #Javascript
Vue开发Html5微信公众号的步骤
Apr 11 #Javascript
跟混乱的页面弹窗说再见
Apr 11 #Javascript
You might like
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
php异常处理捕获错误整理
2019/09/23 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
javascript正则表达式总结
2016/02/29 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
js判断是否是手机页面
2017/03/17 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
python flask 多对多表查询功能
2017/06/25 Python
python下载微信公众号相关文章
2019/02/26 Python
PyQt5实现简易电子词典
2019/06/25 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
禁毒宣传工作方案
2014/05/23 职场文书
中秋晚会策划方案
2014/06/12 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
Java后台生成图片的完整步骤
2021/08/04 Java/Android
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers