<template>
<el-table
:data="tableData"
@row-click="handleRowClick"
@cell-click="handleCellClick"
>
<el-table-column
prop="date"
label="日期"
width="180"
></el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180"
></el-table-column>
<!-- 其他列 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '王小虎', ... },
{ date: '2016-05-04', name: '李小虎', ... },
// 其他数据
]
};
},
methods: {
handleRowClick(row, column, event) {
// 判断点击的是不是某个特定的单元格或者标签
if (event.target.tagName !== 'A' && event.target.tagName !== 'BUTTON') {
// 执行行点击的操作
console.log('行点击事件触发', row, column);
}
},
handleCellClick(row, column, cell, event) {
// 判断点击的是不是某个特定的单元格或者标签
if (event.target.tagName !== 'A' && event.target.tagName !== 'BUTTON') {
// 执行单元格点击的操作
console.log('单元格点击事件触发', row, column);
}
}
}
};
</script>这个代码示例展示了如何在Vue中使用Element UI的el-table组件时，如何区分行点击和单元格点击事件。通过判断事件触发时的event.target.tagName属性，可以决定是执行行点击的操作还是单元格点击的操作。这样就可以避免行点击事件与单元格内部的点击事件发生冲突。