vue实现element表格里表头信息提示功能(推荐)
如图:在element表格操作一栏需要添加提示功能
实现效果
如图:鼠标浮上去弹出tips
解决方案
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表格里表头信息提示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关推荐
-
Vue+element-ui 实现表格的分页功能示例
本文介绍了Vue+element-ui 实现表格的分页功能示例,分享给大家,具体如下: 实现效果如下图所示: template部分: <el-table :data="tempList" :header-cell-style="rowClass" stripe border style="margin-bottom:14px;" :empty-text="emptyText"> <el-table-colum
-
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
在开发中,需要表格控件根据浏览器高度进行调整,固定表头,且然后多余的出滚动条,官方给出的: 只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码. 然后直接上template代码: <template> <el-table :data="tableData3" height="250" border style="width: 100%"> <el-table-column
-
详解vue2.0的Element UI的表格table列时间戳格式化
这两天学习了vue2.0的Element UI的表格table列时间戳格式化,所以,今天添加一点小笔记. 表格属性 <el-table :data="tableData" v-loading.body="loading" border @selection-change="selectionChange" style="width: 100%"> <el-table-column prop="cre
-
vue.js+Element实现表格里的增删改查
新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element (http://element.eleme.io/#/zh-CN)来配合vue.js进行样式填充 之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js 下面就介绍一下vue.js应用在表格里的增删改查 首先引入一下element的js <script src="plugins/element-ui/index.js"></script> 然后引入需要用到的vue
-
element 结合vue 在表单验证时有值却提示错误的解决办法
绑定的值与规则指定的值一定要相同------- 第一步: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> 加上rules ref 第二部: <el-form-item label="活动名称" prop="na
-
利用vue和element-ui设置表格内容分页的实例
html代码 因为我写在template中,也就是新建了组建中,贴出代码. <el-pagination small layout="prev, pager, next" :total="total" @current-change="current_change"> </el-pagination> 代码中,small代表是否使用小型分页样式 layout代表组件布局,子组件名用逗号分隔 属性: total代表总条目数
-
Vue2.0+ElementUI实现表格翻页的实例
ElementUI的表格要求的数据类型为字典数组.我使用了python3写后端,那么从数据库取数据时添加一行cursorclass=pymysql.cursors.DictCursor即可.取出后我将其存入redis数据库方便之后取用.取用时使用eval()函数再传到前端即可. 前端放置Pagination 分页器,我这里直接采用了完整功能的分页器. <el-pagination @size-change="handleSizeChange" @current-change=&q
-
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
先看看ElementUI里关于el-table的template数据结构: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-tabl
-
vue+element-ui实现表格编辑的三种实现方式
1.表格内部显示和编辑切换 这种方式就是利用两个标签显示隐藏来实现,我们这里用input和span,正常用span将数据显示,点击编辑时,将span隐藏,显示input进行编辑.选中当前行我们可以通过slot-scope中的index去实现,在控制显示隐藏的属性上绑定index就可以选中当前行了,如showEdit[index]. 页面结构代码: <el-table :data="tableData" tooltip-effect="dark" style=&
-
vue实现element表格里表头信息提示功能(推荐)
如图:在element表格操作一栏需要添加提示功能 实现效果 如图:鼠标浮上去弹出tips 解决方案 1.编写组件 在 promptMessage.vue 文件里面实现 <template> <!-- 处理element表格表头文字提示特别添加全局注册组件 --> <div class="promt-message-tooltip"> <el-tooltip effect="light" placement="le
-
vue实现在表格里,取每行的id的方法
如下所示: 1.在template上写上 slot-scope="scope" 2.然后在template里边的标签上,scope.row.id 以上这篇vue实现在表格里,取每行的id的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: vue.js+Element实现表格里的增删改查
-
element表格去掉表头的实现方法
文档提示用属性show-header <el-table :data="tableData1" :span-method="arraySpanMethod" border :show-header="status" <el-table-column prop="lable" label="" width="180"> </el-table-column> /
-
vue+elementui实现表格多级表头效果
本文实例为大家分享了vue+elementui实现表格多级表头的具体代码,供大家参考,具体内容如下 table组件 <template> <div class="tableCon" id="tableCon"> <el-table :data="dataSource" :height="tableHeight" v-loading="loading&q
-
vue使用element实现上传图片和修改图片功能
目录 前言 一.应用场景 1.上传图片并进行放大预览 2.图片上传代码 二.修改已经上传的图片,并展示到图片列表中 1.效果展示(先展示原来的图片,再上传新图片,也可删除原来的图片) 2.编辑代码 总结 前言 开发后台管理项目时,遇到了上传图片的模块,这个比较简单,但是保存后的图片需要编辑就比较麻烦了,自己记录一下,也分享一下,多多指教 一.应用场景 1.上传图片并进行放大预览 2.图片上传代码 我这里的实现是直接将图片上传到接口,成功后返回图片路径,表单提交时,后台要路径拼成的字符串格式,类似
-
PHP实现的登录页面信息提示功能示例
本文实例讲述了PHP实现的登录页面信息提示功能.分享给大家供大家参考,具体如下: login.php: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <form action="check_login.php"
-
vue 不使用select实现下拉框功能(推荐)
html部分:v-for循环出的结构 <div > <p @click="clickSize (item, index)">{{item.name}}</p> <transition name="opacityLeave"> <div class="condition-list" v-show="isShowSize && index == i"> &
-
vue格式化element表格中的时间为指定格式
在vue表格中如果直接绑定时间字段默认显示格式一般为:yyyy-MM-dd HH:mm:ss,但有时候只需要显示 年月日 或者 时分秒,这时我们就可以用到过滤器(filter) vue 基础表格 <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180&quo
-
基于Vue.js的表格分页组件
一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁 下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-
随机推荐
- bootstrap如何让dropdown menu按钮式下拉框长度一致
- php图片添加水印例子
- python logging日志模块的详解
- Python中的并发编程实例
- Android UI控件ExpandableListView基本用法详解
- 使用docker搭建gitlab详解
- php md5下16位和32位的实现代码
- AJAX应用中必须要掌握的重点知识(分享)
- AJAX用于判定用户是否注册
- jsp基础速成精华讲解
- PowerShell查看进程的所属用户
- MySQL安装提示"请键入NET HELPMSG 3534以获得更多的帮助"的解决办法
- javascript格式化日期时间方法汇总
- js判断PC端与移动端跳转
- hadoop client与datanode的通信协议分析
- Linux中使用VS Code编译调试C++项目详解
- 浅谈spring boot 1.5.4 异常控制
- Android中使用GridView进行应用程序UI布局的教程
- 使用vue制作探探滑动堆叠组件的实例代码
- jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析