vue3+element-plus里面table表格里最后一列为单选框 如何实现选中一个去操作

在Vue3中，结合Element Plus的Table组件，如果想要实现在最后一列添加单选框并根据选中的状态进行操作，可以按照以下步骤实现：

1. 首先，在数据列表（data）中，为每一项的数据对象添加一个表示是否被选中的属性，比如`selected`，默认值设为`false`。

data() {
  return {
    items: [
      { ... /* 数据项 */, selected: false },
      { ... /* 数据项 */, selected: false },
      // ...
    ]
  };
},

2. 在模板中，为每个行的最后一列渲染一个`el-checkbox`组件，并绑定`v-model`到`item.selected`上。

<template>
  <el-table :data="items">
    <el-table-column type="index"></el-table-column>
    <!-- 其他列 -->
    <el-table-column label="操作" prop="operation">
      <template slot-scope="scope">
        <el-checkbox v-model="scope.row.selected">选择</el-checkbox>
      </template>
    </el-table-column>
  </el-table>
</template>

3. 当需要根据选中的项进行操作时，可以在表格外加一个按钮事件监听，例如`@selection-change`，这个事件会在用户点击选择框改变时触发，你可以在这个事件处理器中遍历选中的项目进行相应的操作。

<template>
  <!-- 表格 -->
  <el-button @click="handleOperation" disabled="!selectedItems.length">操作选定项</el-button>
</template>

<script>
export default {
  methods: {
    handleOperation() {
      const selectedItems = this.items.filter(item => item.selected);
      // 根据selectedItems数组进行操作，如提交、删除等
      console.log('Selected items:', selectedItems);
      selectedItems.forEach(item => {
        // 执行对应的操作...
      });
    }
  },
  computed: {
    selectedItems() {
      return this.items.filter(item => item.selected);
    }
  }
};
</script>