在elementui中Notification元件新增點選事件例項
阿新 • • 發佈:2020-11-12
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}`,message: `通知內容${item}`,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',address: '上海市普陀區金沙江路 1517 弄' },{ date: '2016-05-01',address: '上海市普陀區金沙江路 1519 弄' },{ date: '2016-05-03',address: '上海市普陀區金沙江路 1516 弄' }] } },methods: { handleEdit(index,row) { console.log(index,row); },handleDelete(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元件新增點選事件例項就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。