el-table selection

el-table selection是Element UI中的一个组件，用于在表格中实现行选择功能。用户可以通过点击行或者勾选复选框来选择表格中的行，同时也可以通过设置属性来控制选择的模式，例如单选或多选。选择的结果可以通过绑定的数据来获取。

相关问题

el-table selection 单选

### 实现 `el-table` 单选功能

为了实现在 Element UI 的 `el-table` 中的单选选择功能，可以自定义表格列并绑定点击事件来控制每一行的选择状态。下面是一个具体的实现方法：

#### HTML 部分
创建一个带有唯一键属性的数据表，并移除默认多选框配置。

<template>
  <div>
    <!-- 移除了type="selection" -->
    <el-table :data="tableData" @row-click="handleRowClick">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

#### JavaScript 部分
通过 Vue 组件的方法处理行点击逻辑，在数据对象中维护当前被选中的项。

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2016-05-02', name: 'John', address: 'New York No. 1 Lake Park' }
      ],
      selectedRow: null // 存储当前选中的行
    };
  },
  methods: {
    handleRowClick(row) {
      this.$refs.table.clearSelection(); // 清空之前的选择
      if (this.selectedRow === row) {
        this.selectedRow = null;
      } else {
        this.selectedRow = row;
        this.$nextTick(() => {
          this.$refs.table.toggleRowSelection(row); // 切换选中状态
        });
      }
    }
  }
};
</script>

注意这里使用了 `$refs.table.clearSelection()` 来清除之前的任何已选项，从而确保每次只有一行处于选中状态[^1]。

此外还需要给 `<el-table>` 添加 `ref="table"` 属性以便于调用其 API 方法。

el-table selection 初步选择

对于el-table的初步选择，你可以使用el-table提供的selection属性来实现行选择。首先，你需要在el-table组件上设置selection属性为true，然后在el-table-column组件中设置type属性为'selection'。这样就会在每一行的前面显示一个复选框，你可以通过选择复选框来选择行。

以下是一个示例代码：

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :selection="true"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- 其他列 -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据
      ],
      selectedRows: [] // 保存选中的行数据
    };
  },
  methods: {
    handleSelectionChange(selectedRows) {
      this.selectedRows = selectedRows;
    }
  }
};
</script>

在上述示例中，`tableData`是你要展示的表格数据，`selectedRows`用于保存选中的行数据。当选择行发生变化时，会触发`handleSelectionChange`方法，并将选中的行数据传入，你可以在这个方法中处理选中行的逻辑。

希望对你有所帮助！如果还有其他问题，请随时提问。