vue实现element表格里表头信息提示功能(推荐)


Posted in Javascript onNovember 20, 2019

如图:在element表格操作一栏需要添加提示功能

vue实现element表格里表头信息提示功能(推荐) 

实现效果

如图:鼠标浮上去弹出tips

vue实现element表格里表头信息提示功能(推荐) 

解决方案

1、编写组件

在 promptMessage.vue 文件里面实现

<template>
<!-- 处理element表格表头文字提示特别添加全局注册组件 -->
<div class="promt-message-tooltip">
 <el-tooltip effect="light" placement="left">
  <div slot="content">
   <p v-for="item in messages" :key="item">
    {{item}}
   </p>
  </div>
  <i class="el-icon-question" class="tips-icon"></i>
 </el-tooltip>
</div>
</template>
<script>
export default {
 props: ['messages']
}
</script>
<style lang="scss">
.promt-message-tooltip {
 .tips-icon {
 color:#409eff;
 margin-left:5px;
 font-size:14px;
 }
}
</style>

2、开发插件

在 index.js 文件里面实现

import promptMessage from './promptMessage.vue'
export default {
 install: (Vue) => {
 Vue.component('promptMessage', promptMessage)
 }
}

3、使用插件

在 main.js 文件里面实现

import promptMessage from '@/components/promptMessage/index.js'
Vue.use(promptMessage)

4、业务代码实现

<template>
<el-table tooltip-effect="light" :data="dataList" border >
 <el-table-column label="操作" :render-header="renderHeader">
 <template slot-scope="scope">删除</template>
 </el-table-column>
</el-table>
</template>
<script>
export default {
 methods: {
 // render 事件
 renderHeader (h, { column }) {
  return h(
  'div', {
   style: 'display:flex;margin:auto;'
  },
  [
   h('span', column.label),
   // 直接用组件就完事了
   h('prompt-message', {
   props: { messages: ['kaimo需要的tips!'] }
   })
  ]
  )
 }
 }
}
</script>

总结

以上所述是小编给大家介绍的vue实现element表格里表头信息提示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
jQuery版AJAX简易封装代码
Sep 14 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
解决await在forEach中不起作用的问题
Feb 25 Javascript
微信小程序实现时间进度条功能
Nov 17 #Javascript
小程序实现投票进度条
Nov 20 #Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 #Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 #Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 #Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 #Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 #Javascript
You might like
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Python中functools模块的常用函数解析
2016/06/30 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
C语言面试题
2013/05/19 面试题
NET程序员上机面试题
2015/05/23 面试题
职业规划书如何设计?
2014/01/09 职场文书
保安岗位职责
2014/02/21 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
社区服务标语
2014/07/01 职场文书
运动会通讯稿50字
2015/07/20 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫