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

1. 官方文档

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组件添加点击事件实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是 在elementui中Notification组件添加点击事件实例 的全部内容, 来源链接: utcz.com/p/238512.html

回到顶部