Element-UI checkbox 如何改造成只可单项选择

Bertha 。 2022-11-25 04:21 545阅读 0赞

> Element UI 提供 checkbox 默认实现多选或者全选全不选择，RadioButton 实现单项选择功能，但是如果是一个列表的情况下，使用checkbox 的样式进行单选的情况还是很多的，像 el-table 中，checkbox 可以设置为单选或者多选的任何形式，因此记录一下checkbox 改造成单选的实现思路和方法。

我想多研究研究再写，因为中间遇到了很多问题，最后用了一种最笨的办法 害怕点进来看得小伙伴一无所获

我才用的比较笨的方法是，**把el-checkbox 的样式 重写到 el-radio 了 ，**对就是这样，关于怎么修改数据 让check box 直接实现单选我还需要再研究研究。

### 论一个程序员思想固化不活跃 能多么影响开发效率 ###

**以下是对自己发的牢骚：**

这个功能的实现我最开始的想法就是利用 利用checkbox v-model 的属性 ，通过监听change 进行改变数据 及绑定数据值进行改变每个checkbox 的选中状态 ，我觉着这样一定行，后来发现数据操作改变了，单是页面一直有问题，或者还是实现双选，一直这种方法不可行，就想了别的方法，就是上面的方法。今天想在家多总结一些经验，发现及其简单，最初的思想没有问题，只是代码实现上有问题，我对自己的愚蠢已经佩服的五体投地了。

### 最终实现思想： ###

1.  checkbox v-model 双向绑定状态值，boolean 类型
2.  checkbox 监听change 事件，对于非当前点击的控件，都取消选中状态
3.  **注意的是**：当前点击的checkbox 控件不要再自主去修改状态，element-ui 封装 当前点击状态改变时 绑定的状态已经同步修改，不要再自己去修改了，我就是想当然的踩了这个坑。

看看最新实现的小demo 吧 ，重写样式的代码真的是太不可取了，为什么实现后会复盘，我觉着checkbox 实现单选应该很常见 ，element-ui 不可能让其实现单选那么复杂，结果原来真的是对自己。。。。。。

### 小Demo ###

<template>
      <div class="checkboxContainer">
        <ul>
          <li v-for="(item, index) in datas" :key="index">
            <el-checkbox v-model="item.checked" @change="checkChange(item, index)">{
       { item.name }}</el-checkbox>
          </li>
        </ul>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          checked: true,
          datas: []
        }
      },
      mounted() {
        this.initData()
      },
      methods: {
        initData() {
          // 生成模拟数据
          for (let i = 0; i < 10; i++) {
            this.datas.push({ name: '练习' + i, checked: false })
          }
        },
        checkChange(item, index) {
          for (let i = 0; i < this.datas.length; i++) {
            if (index !== i) {
              this.datas[i].checked = false
            }
            // 错误的思想代码
            // if (index === i) {
            //   console.log(this.datas[i].checked)
            //   this.datas[i].checked = !this.datas[i].checked
            //   console.log(this.datas[i].checked)
            // } else {
            //   this.datas[i].checked = false
            // }
          }
        }
      }
    }
    </script>
    <style lang="scss">
    .checkboxContainer {
      text-align: center;
      padding: 30px;
    }
    </style>

这么点小问题在开发中一边纠结，一边重写了样式，又一边怀疑实在是太不应该，看来每次遇到问题，问题复盘还是很重要的！