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 相关文章推荐
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
VueJS实现用户管理系统
May 29 Javascript
vuex分模块后,实现获取state的值
Jul 26 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获取QQ头像并显示的方法
2014/12/23 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
JavaScript 使用技巧精萃(.net html
2009/04/25 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
Python基于pillow判断图片完整性的方法
2016/09/18 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
python路径的写法及目录的获取方式
2019/12/26 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
科室工作个人总结的自我评价
2013/10/29 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
oracle重置序列从0开始递增1
2022/02/28 Oracle
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers