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 相关文章推荐
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
微信小程序 上传头像的实例详解
Oct 27 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
解析link_mysql的php版
2013/06/30 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
PHP打印输出函数汇总
2016/08/28 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
Python中Yield的基本用法
2020/10/18 Python
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
创联软件面试题笔试题
2012/10/07 面试题
销售员自我评价怎么写
2013/09/19 职场文书
企业法人授权委托书
2014/04/03 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
2016大一新生军训感言
2015/12/08 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书