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 @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() { //从后台获取数据逻辑 model.CacheModel.get(’api/’ + this.rowaa + ’.json’) //通过this.rowaa就可以获取传过来的值 this.formData = 333 } }}</script>

问题解决

可以使用template+slot插值进行管理

点击找到当前行的信息，然后再根据该信息在子组件中请求数据

也试过通过点击行的事件，判断在哪一个单元格然后处理事件，这样也可以，但如果在表格中列存放的内容发生变化又得重新调整

也试过dialog弹出框直接写在当前单元格的template中，就像官网中例子一样，但是这样会在点击时触发多次(次数与当前页展示的数量一致)

补充知识：element cell-click使用方法

我就废话不多说了，大家还是直接看代码吧~

<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实现点击table中的单元格触发事件--弹框就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。