解决el-table的操作栏点击和row-click冲突问题

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @row-click="handleRowClick"
  >
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        {{ scope.row.date }}
      </template>
    </el-table-column>
    <!-- 其他列 -->
    <el-table-column
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleOperationClick(scope.row, $event)">操作</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ...数据
      ]
    };
  },
  methods: {
    handleRowClick(row, column, event) {
      // 判断点击的不是操作列
      if (column.property !== '操作') {
        // 处理行点击事件
      }
    },
    handleOperationClick(row, event) {
      // 处理操作列的点击事件
    }
  }
};
</script>

在这个代码实例中，我们使用了@row-click来处理行的点击事件，并在handleRowClick方法中通过判断点击的列是否为"操作"列来区分是否需要处理行点击事件。同时，我们为操作列的每个按钮绑定了点击事件@click，在handleOperationClick方法中处理操作列按钮的点击事件。这样就避免了行点击和操作列点击的冲突。