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中获取事件对象的方法小结
Mar 13 Javascript
jQuery实现简单二级下拉菜单
Apr 12 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
微信小程序实现时间进度条功能
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
关于尾递归的使用详解
2013/05/02 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
学习ExtJS fit布局使用说明
2009/10/08 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
python 读取DICOM头文件的实例
2018/05/07 Python
python实现windows下文件备份脚本
2018/05/27 Python
django中的图片验证码功能
2019/09/18 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
python中最小二乘法详细讲解
2021/02/19 Python
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
有关打架的检讨书
2014/01/25 职场文书
人事科岗位职责范本
2014/03/02 职场文书
《观舞记》教学反思
2014/04/16 职场文书
城管大队整治方案
2014/05/06 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
golang 实现并发求和
2021/05/08 Golang
mysql的数据压缩性能对比详情
2021/11/07 MySQL