vue el-table @row-click 事件与行内点击事件冲突解决

<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属性，可以决定是执行行点击的操作还是单元格点击的操作。这样就可以避免行点击事件与单元格内部的点击事件发生冲突。