vue3 element-plus table 点击指定单元格事件

要实现点击指定单元格事件，可以使用 `el-table-column` 组件的 `slot-scope` 属性和 `el-table` 组件的 `@cell-click` 事件配合使用。

下面是一个例子：

<template>
  <el-table :data="tableData" @cell-click="handleCellClick">
    <el-table-column prop="name" label="姓名">
      <template #default="{row}">
        <span @click="handleNameClick(row)">{{row.name}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 20, address: '上海市' },
        { name: '王五', age: 22, address: '广州市' }
      ]
    }
  },
  methods: {
    handleCellClick(row, column, cell, event) {
      console.log('点击了单元格', row, column, cell, event)
    },
    handleNameClick(row) {
      console.log('点击了姓名', row)
    }
  }
}
</script>

在上面的例子中，我们给 `el-table-column` 的 `default` 插槽绑定了一个点击事件，事件处理函数为 `handleNameClick`。当用户点击姓名单元格时，`handleNameClick` 函数会被触发，同时会将对应的行数据作为参数传递给事件处理函数。在 `handleNameClick` 函数中，我们可以根据需要处理这些参数。

同时，我们也给 `el-table` 组件绑定了 `@cell-click` 事件，事件处理函数为 `handleCellClick`。当用户点击表格中的任意单元格时，`handleCellClick` 函数会被触发，同时会将点击的单元格的行数据、列数据、单元格元素和原始事件对象作为参数传递给事件处理函数。在 `handleCellClick` 函数中，我们可以根据需要处理这些参数。