在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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
Javascript日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 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
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
php实现对象克隆的方法
2015/06/20 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
深入理解Python3中的http.client模块
2017/03/29 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
python得到电脑的开机时间方法
2018/10/15 Python
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
外科实习自我鉴定
2013/10/06 职场文书
即兴演讲稿
2014/01/04 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
青春雷锋观后感
2015/06/10 职场文书
素质拓展训练感想
2015/08/07 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技