在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 相关文章推荐
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
vue实现tab栏点击高亮效果
Aug 19 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
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基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
Python守护进程用法实例分析
2015/06/04 Python
Python Django基础二之URL路由系统
2019/07/18 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
大学生先进事迹材料
2014/02/16 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
公司员工培训管理制度
2015/08/04 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
asyncio异步编程之Task对象详解
2022/03/13 Python
Python实现科学占卜 让视频自动打码
2022/04/09 Python
Win11 BitLocker 驱动器加密
2022/04/19 数码科技
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技