vue表格实现单选框

Vue 表格实现单选框的方法

在 Vue 中实现表格单选框功能，可以通过结合 el-table（Element UI）或原生表格与 Vue 的数据绑定特性完成。以下是几种常见实现方式：

使用 Element UI 的 el-table 组件

Element UI 提供了内置的单选框支持，可直接在表格中启用。

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三' },
        { name: '李四' }
      ],
      selectedRow: null
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedRow = val.length > 0 ? val[0] : null;
    }
  }
};
</script>

关键点：

• 设置 type="selection" 启用复选框列。
• 通过 @selection-change 监听选中变化，仅保留最后一项实现单选效果。

自定义单选框（原生或第三方库）

若需完全自定义单选框样式或逻辑，可通过手动绑定实现：

<template>
  <table>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>
        <input
          type="radio"
          :value="item.id"
          v-model="selectedId"
          @change="handleRadioChange(item)">
      </td>
      <td>{{ item.name }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' }
      ],
      selectedId: null
    };
  },
  methods: {
    handleRadioChange(item) {
      console.log('选中项:', item);
    }
  }
};
</script>

关键点：

• 使用 v-model 绑定单选值（如 selectedId）。
• 通过 @change 事件触发自定义逻辑。

使用 Vue 计算属性优化

若需动态禁用某些选项，可结合计算属性：

computed: {
  disabledItems() {
    return this.tableData.map(item => item.id === 2); // 禁用ID为2的项
  }
}

在模板中绑定 :disabled 属性：

<input
  type="radio"
  :disabled="disabledItems[index]">

注意事项

1. 数据一致性：确保 v-model 绑定的值与选项的 value 属性匹配。
2. 性能：大数据量时建议使用虚拟滚动（如 el-table 的虚拟滚动功能）。
3. 样式：自定义单选框时可能需要隐藏原生输入框并用 CSS 美化。

通过以上方法，可灵活实现 Vue 表格中的单选功能，适应不同场景需求。