elementui中提供了點(diǎn)擊行處理事件

查看位置： elementui的table事件

elementui的table中怎樣點(diǎn)擊某個(gè)單元格觸發(fā)事件？

可以先看一下官網(wǎng)中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: ’上海市普陀區(qū)金沙江路 1518 弄’ }, { date: ’2016-05-04’, name: ’王小虎’, address: ’上海市普陀區(qū)金沙江路 1517 弄’ }, { date: ’2016-05-01’, name: ’王小虎’, address: ’上海市普陀區(qū)金沙江路 1519 弄’ }, { date: ’2016-05-03’, name: ’王小虎’, address: ’上海市普陀區(qū)金沙江路 1516 弄’ }] } }, methods: { handleEdit(index, row) { console.log(index, row); }, handleDelete(index, row) { console.log(index, row); } } }</script>

點(diǎn)擊單元格彈出框可以使用template-scope方式實(shí)現(xiàn)

父組件

<el-table :data='tableData' border style='width: 100%'> <el-table-column label='編號(hào)' prop = 'number' width='180'> <template scope='scope'> <div @click='getMore(scope.row)'>{{ scope.row.date }}</div> </template> </el-table-column> <el-table-column label='名稱' prop = 'name' width='180'> <template scope='scope'> <div @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 = truethis.row = row }, getMore2(row) {this.getB = truethis.row = row } } }</script>

子組件 mycomponent

<div>{{formData}}</div> <script>export default { props: [’rowaa’], data() { return { formData:’’ } }, created() { this.getData() }, watch : { ’rowaa’ : ’getData’ }, methods: { getData() { //從后臺(tái)獲取數(shù)據(jù)邏輯 model.CacheModel.get(’api/’ + this.rowaa + ’.json’) //通過(guò)this.rowaa就可以獲取傳過(guò)來(lái)的值 this.formData = 333 } }}</script>

問(wèn)題解決

可以使用template+slot插值進(jìn)行管理

點(diǎn)擊找到當(dāng)前行的信息，然后再根據(jù)該信息在子組件中請(qǐng)求數(shù)據(jù)

也試過(guò)通過(guò)點(diǎn)擊行的事件，判斷在哪一個(gè)單元格然后處理事件，這樣也可以，但如果在表格中列存放的內(nèi)容發(fā)生變化又得重新調(diào)整

也試過(guò)dialog彈出框直接寫在當(dāng)前單元格的template中，就像官網(wǎng)中例子一樣，但是這樣會(huì)在點(diǎn)擊時(shí)觸發(fā)多次(次數(shù)與當(dāng)前頁(yè)展示的數(shù)量一致)

補(bǔ)充知識(shí)：element cell-click使用方法

我就廢話不多說(shuō)了，大家還是直接看代碼吧~

<el-table border :data='Datalist' @cell-click='handle' >methods: {handle(row,column,event,cell) { console.log(row) console.log(column) console.log(event) console.log(cell) }}

以上這篇vue+elementui實(shí)現(xiàn)點(diǎn)擊table中的單元格觸發(fā)事件--彈框就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。