el-table 单选按钮

el-table 单选按钮是通过在 el-table-column 中使用 el-radio 实现的。具体实现方式是在 el-radio 中绑定 label 和 v-model，其中 label 绑定的是每一行数据的唯一标识符，v-model 绑定的是选中的行的标识符。同时，需要在 el-radio 的 change 事件中调用 handleSelectionChange 方法，将选中的行信息存储在 rowInfo 中。

相关问题

el-table 单选的选项

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

在 Element UI 中，为了实现在表格 (`el-table`) 内部的单选行为，可以利用内置的选择列组件并配合特定属性来完成。通过设置 `el-table-column` 的 `type="radio"` 属性能够开启每一行前显示单选框的功能[^1]。

对于控制哪一行被默认选中或是响应用户点击事件后的逻辑处理，则需借助于额外的数据绑定与监听器：

- 使用 `row-key` 属性指定每行唯一标识符字段名；
- 利用 `@selection-change` 事件捕获选择变化情况，并据此更新内部状态或执行其他操作；

下面给出一段简单的代码示例展示如何配置以及实现这一特性:

<template>
  <div>
    <!-- 表格 -->
    <el-table :data="tableData" @selection-change="handleSelectionChange" row-key="id">
      <!-- 定义一列表头为单选按钮 -->
      <el-table-column type="radio"></el-table-column>
      
      <!-- 其他表头定义... -->
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
    </el-table>

    <!-- 显示当前选中的项的信息 (可选)-->
    <p v-if="selectedRow">已选中: {{ selectedRow.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', date: '2016-05-03' },
        { id: 2, name: '李四', date: '2016-05-02' }
      ],
      selectedRow: null // 存储当前选中的那一行数据对象
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRow = selection.length === 1 ? selection[0] : null;
    }
  }
};
</script>

上述例子展示了基本的单选配置方式及其交互效果。当用户选择了某一行之后，页面上会显示出该条记录的具体信息[^1]。

el-table实现单选框效果

在ECharts Table (el-table)组件中实现单选框的效果通常需要结合Vue.js的数据驱动特性。你可以通过以下几个步骤来完成：

1. **数据准备**：在你的数据对象数组中，为每个对象添加一个表示是否被选中的布尔值字段，比如`selected`。

data = [
  { id: 1, name: 'Option 1', selected: false },
  { id: 2, name: 'Option 2', selected: false },
  //...
]

2. **模板设置**：在el-table的列定义中，使用template选项插入HTML元素，这里可以是一个el-checkbox元素，并绑定到`selected`属性上。

<el-table-column label="选择" prop="selected">
  <template slot-scope="scope">
    <el-checkbox v-model="scope.row.selected"></el-checkbox>
  </template>
</el-table-column>

3. **事件监听**：如果你希望用户点击单选框时更新状态，可以在表单外面创建一个全局变量或者使用计算属性来管理所有行的状态，并在`change`事件中处理单选切换。

<template>
  <el-table :data="data" @change="handleSelectionChange">
    <!--...其他列...-->
  </el-table>
  
  <!--...省略其它部分...-->

  <script>
    methods: {
      handleSelectionChange(row) {
        // 更新单选框对应的行状态
        this.$set(this.data, row.index, { ...row, selected: !row.selected });
        // 如果你想记录整体的选择状态，这里还可以做进一步的操作
        this.globalSelection = this.data.filter(r => r.selected).length;
      }
    }
  </script>
</template>

4. **复选框联动**：如果要实现全选或反选功能，可以在表格外部添加一个单独的按钮，监听按钮的点击事件，然后遍历数据，批量更新`selected`字段。

记得在实际项目中，还要考虑数据绑定的双向作用以及状态管理和潜在的性能优化。