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 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
js当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
vue-cli创建的项目中的gitHooks原理解析
Feb 14 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 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
thinkphp特殊标签用法概述
2014/11/24 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Python3实现二叉树的最大深度
2019/09/30 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
pandas数据拼接的实现示例
2020/04/16 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
服装采购员岗位职责
2014/03/15 职场文书
人力资源管理求职信
2014/08/07 职场文书
个人融资协议书
2014/10/02 职场文书
见习报告格式要求
2014/11/04 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
Python进度条的使用
2021/05/17 Python
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技