vue3 el-table虚拟化表格如何在某一行中添加事件

Vue3中的`el-table`组件支持虚拟化，这在处理大量数据时可以提高性能。如果你想在某一行中添加事件，通常我们会使用`row-click`事件或者通过模板插槽来自定义单元格内容。下面是一个例子，展示如何在`el-table`的某一行中添加点击事件：

<template>
  <el-table
    :data="tableData"
    @row-click="handleRowClick">
    <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 setup>
import { ref } from 'vue';

const tableData = ref([
  // 表格数据
]);

const handleRowClick = (row) => {
  // row即为点击行的数据对象
  console.log('当前行的数据：', row);
  // 在这里可以添加你的业务逻辑处理代码
};
</script>

在这个例子中，`el-table`组件的`row-click`事件被用来监听行的点击事件。每当用户点击某一行时，`handleRowClick`方法会被触发，并且被点击的行数据作为参数传递给该方法。

你也可以使用作用域插槽来自定义行内容，包括在其中添加事件。作用域插槽允许你访问行数据和其他行级的属性：

<template v-slot="{ row }">
  <el-table-column prop="date" label="日期" width="180"></el-table-column>
  <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  <!-- 使用作用域插槽来自定义最后一列 -->
  <el-table-column label="操作" width="180">
    <template v-slot="scope">
      <el-button @click="handleButtonClick(scope.row)">点击我</el-button>
    </template>
  </el-table-column>
</template>

在这个作用域插槽的例子中，我们添加了一个按钮，并且绑定了`handleButtonClick`方法，当按钮被点击时，该方法会被触发。