elementplus ell-table自定义单选框

Element Plus 是一套基于 Vue.js 的 UI 组件库，它对 Element UI 进行了现代化和精简。其中，`<el-table>` 是一个强大的表格组件，用于展示数据列表。如果你想在 `el-table` 中添加自定义的单选框功能，你可以通过以下步骤操作：

1. 首先，在模板（`.vue` 文件）中，为每一行数据绑定一个 `row-class-name` 或者直接在列模板 (`template slot`) 中插入单选框元素：

<template>
  <el-table :data="tableData" :row-class-name="getRowClass">
    <el-table-column type="index"></el-table-column>
    <!-- 添加单选框列 -->
    <el-table-column type="selection" label="选择">
      <template slot-scope="scope">
        <input v-model="selectedItems" @change="handleCheckboxChange(scope.$index)" :value="scope.row.id" type="radio">
      </template>
    </el-table-column>
    <!-- ... 其他列 ... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...], // 数据数组
      selectedItems: [] // 存储已选中的项 ID
    };
  },
  methods: {
    handleCheckboxChange(index) {
      // 管理选中的状态，比如添加到 selectedItems 或触发其他业务逻辑
    },
    getRowClass({ row }) {
      // 根据需要返回对应的 CSS 类名，例如选中样式
    }
  }
};
</script>

2. `handleCheckboxChange` 方法会在用户点击单选框时触发，你可以在这里更新 `selectedItems` 数组，记录选中的行。

3. 如果你想控制整个表格是否启用单选模式，可以设置全局的 `selection-mode` 属性：

<el-table :data="tableData" selection-mode="single">