在elementui中Notification组件添加点击事件实例


Posted in Javascript onNovember 11, 2020

1. 官方文档

在elementui中Notification组件添加点击事件实例

2. 添加点击事件,传参

handleClick() {
 let telNo = "1111",
 message = "22222",
 _this = this; //函数作用域问题

 this.$notify({
 title: "通知消息",
 position: "bottom-right",
 dangerouslyUseHTMLString: true,
 message: `<p style="cursor: pointer;">号码:<i>${telNo}</i></p>`,
 duration: 0,
 type: "warning",
 onClick() {
 _this.defineCallBack(message); //自定义回调,message为传的参数
 }
 });
},

//点击事件回调
defineCallBack(message) {
 console.log(message);
},

3. 按一定时间顺序弹出消息通知

//按一定时间顺序弹出消息通知
notifyByOrder() {
 let data = ["aaaa", "bbbbb", "ccccc"];
 for (let i = 0; i < data.length; i++) {
 let item = data[i];
 setTimeout(() => {
 this.$notify({
 title: `通知${i + 1}`,
 position: "bottom-right",
 message: `通知内容${item}`,
 duration: 0,
 type: "warning"
 });
 }, i * 5000);
 }
}

补充知识:vue+elementui怎样点击table中的单元格触发事件--弹框

elementui中提供了点击行处理事件

查看位置: elementui的table事件

elementui的table中怎样点击某个单元格触发事件?

可以先看一下官网中table的自定义列模板代码

<template>
 <el-table
 :data="tableData"
 border
 style="width: 100%">
 <el-table-column
 label="日期"
 width="180">
 <template scope="scope">
 <el-icon name="time"></el-icon>
 <span style="margin-left: 10px">{{ scope.row.date }}</span>
 </template>
 </el-table-column>
 <el-table-column
 label="姓名"
 width="180">
 <template scope="scope">
 <el-popover trigger="hover" placement="top">
  <p>姓名: {{ scope.row.name }}</p>
  <p>住址: {{ scope.row.address }}</p>
  <div slot="reference" class="name-wrapper">
  <el-tag>{{ scope.row.name }}</el-tag>
  </div>
 </el-popover>
 </template>
 </el-table-column>
 <el-table-column label="操作">
 <template scope="scope">
 <el-button
  size="small"
  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
 <el-button
  size="small"
  type="danger"
  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
 </template>
 </el-table-column>
 </el-table>
</template>
<script>
 export default {
 data() {
 return {
 tableData: [{
  date: '2016-05-02',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄'
 }, {
  date: '2016-05-04',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1517 弄'
 }, {
  date: '2016-05-01',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1519 弄'
 }, {
  date: '2016-05-03',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1516 弄'
 }]
 }
 },
 methods: {
 handleEdit(index, row) {
 console.log(index, row);
 },
 handleDelete(index, row) {
 console.log(index, row);
 }
 }
 }
</script>

点击单元格弹出框可以使用template-scope方式实现

父组件

<el-table
 :data="tableData"
 border
 style="width: 100%">
 <el-table-column
 label="编号"
 prop = "number"
 width="180">
 <template scope="scope">
 <div style="color:red;text-decoration:underline;cursor:pointer;" @click="getMore(scope.row)">{{ scope.row.date }}</div>
 </template>
 </el-table-column>
 <el-table-column
 label="名称"
 prop = "name"
 width="180">
 <template scope="scope">
 <div style="color:red;text-decoration:underline;cursor:pointer;" @click="getMore2(scope.row)">{{ scope.row.date }}</div>
 </template>
 </el-table-column>
</el-table>
 
<el-dialog :visible-sync="getA">
 <my-component :rowaa=row></my-component>
</el-dialog>
<el-dialog :visible-sync="getB">
 <my-component2 :rowaa=row></my-component2>
</el-dialog>
<script>
 import myComponent from './mycomponent'
 import myComponent2 form './mycomponent2'
 export default {
 data() {
  return {
  tableData : [
   {"number" : 1,"name":"y"},
   {"number" : 2,"name":"x"},
  ],
  getA : false,
  getB : false,
  row : ''
  } 
 },
 components: {
  'my-component' : myComponent,
  'my-component2' : myComponent2 
 },
 methods : {
  getMore(row) {
  this.getA = true
  this.row = row
  },
  getMore2(row) {
  this.getB = true
  this.row = row
  }
 }
 }
</script>

子组件 mycomponent

<div>{{formData}}</div>
 
<script>
export default {
 props: ['rowaa'],
 data() {
 return {
  formData:''
 }
 },
 created() {
 this.getData() 
 },
 watch : {
 'rowaa' : 'getData'
 },
 methods: {
 getData() {
  //从后台获取数据逻辑 model.CacheModel.get('api/' + this.rowaa + '.json')
  //通过this.rowaa就可以获取传过来的值
  this.formData = 333
 }
 }
}
</script>

问题解决

可以使用template+slot插值进行管理

点击找到当前行的信息,然后再根据该信息在子组件中请求数据

也试过通过点击行的事件,判断在哪一个单元格然后处理事件,这样也可以,但如果在表格中列存放的内容发生变化又得重新调整

也试过dialog弹出框直接写在当前单元格的template中,就像官网中例子一样,但是这样会在点击时触发多次(次数与当前页展示的数量一致)

以上这篇在elementui中Notification组件添加点击事件实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
Javascript之Date对象详解
Jun 07 Javascript
微信小程序入门教程
Nov 18 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
vue.js+element 默认提示中英文操作
Nov 11 #Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 #Javascript
vue 实现element-ui中的加载中状态
Nov 11 #Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 #Javascript
JS前端基于canvas给图片添加水印
Nov 11 #Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 #Javascript
使用Vant完成Dialog弹框案例
Nov 11 #Javascript
You might like
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
Python 实现微信防撤回功能
2019/04/29 Python
django迁移数据库错误问题解决
2019/07/29 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
pygame实现飞机大战
2020/03/11 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
python音频处理的示例详解
2020/12/23 Python
python中常用的数据结构介绍
2021/01/12 Python
经济担保书范文
2014/04/02 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
个人投资计划书
2014/05/01 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
高三英语教学计划
2015/01/23 职场文书
销售员岗位职责范本
2015/04/11 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python