vue el-table 如何实现单选

在Vue中，使用Element UI库的el-table组件可以实现单选功能。下面是实现单选的步骤：

1. 首先，在Vue组件中引入el-table和el-table-column组件：

<template>
  <div>
    <el-table :data="tableData" @row-click="handleRowClick" :row-key="row => row.id">
      <el-table-column type="selection"></el-table-column>
      <!-- 其他列配置 -->
    </el-table>
  </div>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-ui';

export default {
  components: {
    ElTable,
    ElTableColumn,
  },
  // 其他代码...
}
</script>

2. 在data中定义tableData数组，用于存储表格数据，并定义selectedRow变量，用于存储选中的行数据：

data() {
  return {
    tableData: [
      // 表格数据
    ],
    selectedRow: null,
  };
},

3. 在methods中定义handleRowClick方法，用于处理行点击事件，并更新selectedRow变量：

methods: {
  handleRowClick(row) {
    this.selectedRow = row;
  },
},

4. 在el-table组件上绑定row-click事件，将handleRowClick方法作为事件处理函数：

<el-table :data="tableData" @row-click="handleRowClick" :row-key="row => row.id">

5. 在需要展示选中行的地方，使用selectedRow变量即可：

<div>选中的行：{{ selectedRow }}</div>

这样，当用户点击表格的某一行时，selectedRow变量会更新为对应的行数据，实现了单选功能。