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入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
js实现抽奖效果
Mar 27 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
Vue 刷新当前路由的实现代码
Sep 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高效率写法(详解原因)
2013/06/20 PHP
php动态生成函数示例
2014/03/21 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
使用python爬取微博数据打造一颗“心”
2019/06/28 Python
HTML的form表单和django的form表单
2019/07/25 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
新闻学专业应届生求职信
2013/11/08 职场文书
学生自我鉴定
2013/12/18 职场文书
生产车间标语
2014/06/11 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
食品安全承诺书范文
2014/08/29 职场文书
学党史心得体会
2014/09/05 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
档案管理员岗位职责
2015/02/12 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
整改通知书格式
2015/04/22 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
mysql 生成连续日期及变量赋值
2022/03/20 MySQL