elementui中提供了点击行处理事件
elementui的table中怎样点击某个单元格触发事件？
可以先看一下官网中table的自定义列模板代码
:data="tableData"
border
style="width: 100%">
label="日期"
width="180">
{{ scope.row.date }}
label="姓名"
width="180">
姓名: {{ scope.row.name }}
住址: {{ scope.row.address }}
{{ scope.row.name }}
size="small"
@click="handleEdit(scope.$index, scope.row)">编辑
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除
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);
}
}
}
点击单元格弹出框可以使用template-scope方式实现
父组件
:data="tableData"
border
style="width: 100%">
label="编号"
prop = "number"
width="180">
label="名称"
prop = "name"
width="180">
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
}
}
}
子组件 mycomponent
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
}
}
}
问题解决
可以使用template+slot插值进行管理
点击找到当前行的信息，然后再根据该信息在子组件中请求数据
也试过通过点击行的事件，判断在哪一个单元格然后处理事件，这样也可以，但如果在表格中列存放的内容发生变化又得重新调整
也试过dialog弹出框直接写在当前单元格的template中，就像官网中例子一样，但是这样会在点击时触发多次(次数与当前页展示的数量一致)
补充知识：element cell-click使用方法
我就废话不多说了，大家还是直接看代码吧~
methods: {
handle(row,column,event,cell) {
console.log(row)
console.log(column)
console.log(event)
console.log(cell)
}
}
以上这篇vue+elementui实现点击table中的单元格触发事件--弹框就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。