Element-UI checkbox 如何改造成只可单项选择_小智大愚的博客

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

以下是对自己发的牢骚：

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

最终实现思想：

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

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

小Demo

<template>
  <div class="checkboxContainer">
      <li v-for="(item, index) in datas" :key="index">
        <el-checkbox v-model="item.checked" @change="checkChange(item, index)">{{ item.name }}</el-checkbox>
</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>
这么点小问题在开发中一边纠结，一边重写了样式，又一边怀疑实在是太不应该，看来每次遇到问题，问题复盘还是很重要的！ 
                    Element UI 提供 checkbox 默认实现多选或者全选全不选择，RadioButton 实现单项选择功能，但是如果是一个列表的情况下，使用checkbox 的样式进行单选的情况还是很多的，像 el-table 中，checkbox 可以设置为单选或者多选的任何形式，因此记录一下checkbox 改造成单选的实现思路和方法。...
				nested_el-checkbox
element-ui的el-checkbox实现嵌套多选，单选
tips:chrome获取本地json数据时会产生跨域问题，建议用firefox直接打开
主要功能：
实现多选框层级嵌套
当选中一个二级子菜单的时候，其对应的上级菜单也选中
若二级子菜单无一个选中，则对应的一级菜单也不是选中状态
当一级菜单发生点击事件时，若原本为选中状态，则取消选中，若该菜单下有二级子菜单，所有子菜单也取消选中状态；若原本为未选中状态，则改为选中状态，若该菜单下有二级子菜单，所有子菜单也改为选中状态。
实现已有的选择记录的复现。
1.data数据
data() {
	return {
		menu:  [] //所有的菜单数组，
		menusIds: [] //已选的菜单id数组
2.html部分
  要实现一个嵌套的效果，每一个一级菜单应该
1. 每一种类型，可以全选，反选(一个都不选)，单选(仅选一个或者多个)
2. 保存时，至少有一种类型，选择1个或多个。不能都不选，直接提交空表单。
3. 保存时，提交参数都是id，不能出现中文。
初始页面数据如下：
    "groupId": 1,
    "groupName": "运动",
    "checkAll": false,
				vue +el-checkbox多选框实现单选
1.表格加一列
<el-table-column type="selection" align="center" width="100" />
2.隐藏掉全选按钮
/deep/ thead .el-table-column--selection .cell{
    display: none;
3.给表格加一个 ref，例如：ref="Table" （加在el-table的属性里）
给表格加一个事件 @selection="getCurr
				因为element-ui上面的带checkbox的表格，是多选。如下操作，能把多选变成单选。最终结果如下图：
代码如下：
   <el-table ref="multipleTable" :data="dialogTables" @select-all="dialogCheck" @select="dialogCheck" @selection-change="dialogCheckChange">
    <el-table-column type="selection" width="
				<el-checkbox-group v-model="form.checkState">
    <el-checkbox  false-label='null' true-label="true" name="state">启用</el-checkbox>
    <el-checkbox  false-label='null' true-label=...
				当使用 ElementUI 的 Table 组件进行多选时，可以通过配置 `show-selection` 和 `selection-type` 属性来实现多选功能。
其中，`show-selection` 属性用于控制是否显示选择列，如果设置为 `false` 则不会显示选择列，如果设置为 `true` 则会显示选择列。
`selection-type` 属性用于指定选择类型，可以设置为 `'checkbox'` 或 `'radio'`。当设置为 `'checkbox'` 时，会显示复选框，允许用户选择多行数据，当设置为 `'radio'` 时，会显示单选框，只允许用户选择一行数据。
在选中数据后，可以通过 `@selection-change` 事件获取选中的数据，或者通过 `this.$refs.table.getSelectedRows()` 方法获取选中的数据。另外还可以通过 `@select-all` 和 `@select` 事件监听全选和单选操作。
示例代码如下：
```html
<template>
    <el-table :data="tableData" :show-selection="true" :selection-type="'checkbox'" @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' },
        { name: '赵六', age: 24, gender: '女' }
  methods: {
    handleSelectionChange(rows) {
      console.log(rows) // 获取选中的数据
</script>

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

最终实现思想：

小Demo

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