1.问题示例图
1.点击单元格事件时,同时触发了行点击事件
2.代码示例
1.在单元格点击事件上加.stop,防止事件传递
<template>
<avue-crud ref="crud" :option="option" @row-click="rowClick" :data="data" >
<template slot-scope="scope" slot="age">
<div>
<el-link @click.stop="cellClick">{{ scope.row.age }}</el-link>
</div>
</template>
</avue-crud>
</template>
<script>
export default {
name: 'demo.vue',
data() {
return {
drawer: false,
nodes: [],
openId: [],
openTitle: '',
openData: {},
data: [
{
id: 0,
name: '张三',
age: '12'
},
{
id: 1,
name: '李四',
age: '23'
}
],
option: {
menu: false,
delBtn: false,
addBtn: false,
editBtn: false,
addRowBtn: true,
cellBtn: false,
cancelBtn: false,
column: [
{
label: '姓名',
prop: 'name',
cell: true
},
{
label: '年龄',
prop: 'age',
cell: true
}
]
}
}
},
methods: {
rowClick(row, column, event) {
alert('行点击事件')
},
cellClick(row, column, cell, event) {
alert('单元格点击事件')
}
}
}
</script>