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

时间：2025-01-19 16:30:49

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

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

 

 

相关文章