vue3 el-table 实现单选效果

以下是在Vue3中实现el-table单选效果的方法：

1. 使用v-model绑定选中的行数据：

<template>
  <el-table :data="tableData" v-model="selectedRow" @row-click="handleRowClick">
    <!-- 表格列定义 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ],
      selectedRow: null // 绑定选中的行数据
    };
  },
  methods: {
    handleRowClick(row) {
      this.selectedRow = row; // 点击行时更新选中的行数据
    }
  }
};
</script>

2. 使用自定义列模板实现单选框：

<template>
  <el-table :data="tableData" @row-click="handleRowClick">
    <el-table-column type="selection" width="55">
      <template #default="{ row }">
        <el-checkbox v-model="selectedRows" :label="row"></el-checkbox>
      </template>
    </el-table-column>
    <!-- 其他表格列定义 -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ],
      selectedRows: [] // 绑定选中的行数据
    };
  },
  methods: {
    handleRowClick(row) {
      const index = this.selectedRows.indexOf(row);
      if (index > -1) {
        this.selectedRows.splice(index, 1); // 取消选中
      } else {
        this.selectedRows.push(row); // 选中
      }
    }
  }
};
</script>