vue el-table 单选

Vue的el-table是Element UI库中的一个表格组件，它提供了丰富的功能和选项来展示和操作数据。el-table支持单选功能，可以通过配置来实现。

要实现el-table的单选功能，需要使用el-table的selection属性来指定数据项中用于标识选中状态的字段。具体步骤如下：

1. 在el-table组件上添加selection属性，指定一个字段名，用于标识选中状态。例如，可以将selection属性设置为"selected"。
2. 在数据项中添加一个与selection属性相对应的字段，用于存储选中状态。例如，可以在每个数据项中添加一个名为"selected"的字段，并初始化为false。
3. 在el-table-column组件中添加type属性，并将其设置为"selection"，以显示选择框。
4. 在el-table组件上添加@selection-change事件监听器，当选择发生变化时触发回调函数。
5. 在回调函数中更新数据项的选中状态。

下面是一个示例代码：

<template>
  <el-table :data="tableData" :selection="selectedItems" @selection-change="handleSelectionChange">
    <el-table-column type="selection"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, selected: false },
        { name: '李四', age: 25, selected: false },
        { name: '王五', age: 30, selected: false }
      ],
      selectedItems: []
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedItems = selection;
    }
  }
};
</script>

在上述示例中，el-table的selection属性被设置为"selected"，数据项中添加了一个名为"selected"的字段，并初始化为false。el-table-column的type属性被设置为"selection"，以显示选择框。@selection-change事件监听器会在选择发生变化时触发回调函数handleSelectionChange，通过更新selectedItems数组来保存选中的数据项。