侧边栏壁纸
博主头像
M酷博主等级

一帆风顺 ⛵️⛵️⛵️

  • 累计撰写 45 篇文章
  • 累计创建 40 个标签
  • 累计收到 454 条评论

目 录CONTENT

文章目录

如何把el-checkbox当作el-radio使用?

M酷
2021-01-04 / 3 评论 / 5 点赞 / 3,893 阅读 / 3,358 字 / 正在检测是否收录...
广告 广告

背景:

在使用ElementUI进行项目开发过程中,有一次需要实现如下样式,是一个筛选,肯定不能用复选框,看样式和ElementUI的el-radio不太一样,反而和el-checkbox的样式一样,那我们可以直接把el-checkbox当做el-radio来用吗?
截图 1.png

尝试:

试了一下,发现不能直接用,和radio的需求相差很多,主要暴露出以下问题:

  1. el-checkbox对对象类型的绑定支持不友好;
  2. el-checkbox无法实现单选功能;
  3. el-checkbox选择后可以取消;

解决方案:

既然知道了有这些问题,那我们直接解决掉就可以了

  • 让el-checkbox支持对象类型的绑定
    经过尝试和搜索,发现可以使用以下方式支持
<el-checkbox-group class="types" v-model="typeValue" @change="typesChange">
    <el-checkbox
      v-for="(itm, idx) in typeList"
      :key="idx"
      :label="itm.value"
      >{{ itm.label }}</el-checkbox
    >
</el-checkbox-group>
  • 让el-checkbox实现单选功能
    经过尝试,发现可以在不修改原有绑定形式的情况下,在chang事件中进行处理,如下:
typesChange(data) {
    //关键代码,typeValue数组里的个数大于1个就移除前一个
    this.typeValue.length > 1 ? this.typeValue.shift() : null;
    this.param.type = this.typeValue.join('');
    this.getData(1);
}
  • 让el-checkbox选择后无法取消,和radio表现一致
    这里我思考了一下,最开始想通过事件的方式处理,但是觉得会比较麻烦,后来看到disabled这个属性,心想是不是可以直接用这个disabled的状态来阻止被选中的item再次点击呢?
    :disabled="itm.value == typeValue.join('')"
    直接添加disabled,如果当前值和选择的值一样就禁用。
    我尝试了一下,果然可以。
<el-checkbox-group class="types" v-model="typeValue" @change="typesChange">
    <el-checkbox
      v-for="(itm, idx) in typeList"
      :key="idx"
      :label="itm.value"
      :disabled="itm.value == param.type"
      >{{ itm.label }}</el-checkbox
    >
</el-checkbox-group>

02.gif
只是disabled的样式是灰色的,这个和需求不符,简单。。。
我们直接用选中的样式来覆盖它不就完了,Bingo
01.gif

.types {
      height: 50px;
      line-height: 50px;
      /deep/.el-checkbox.is-disabled {
        .el-checkbox__input {
          &.is-checked {
            & + .el-checkbox__label {
              cursor: default;
              color: #368fff;
            }
            .el-checkbox__inner {
              cursor: default;
              background-color: #368fff;
              border-color: #368fff;
              &::after {
                cursor: default;
                border-color: #fff;
              }
            }
          }
        }
      }
    }

好啦,el-checkbox转el-radio的需求已经实现了。
有时候el-checkbox可能有中间状态,用来配合checkbox-group处理全选,如果不需要,直接干掉,indeterminate给false即可。
完整代码如下:

<template>
  <div class="filters">
    <el-checkbox-group class="types" v-model="typeValue" @change="typesChange">
      <el-checkbox
        v-for="(itm, idx) in typeList"
        :key="idx"
        :label="itm.value"
        :disabled="itm.value == param.type"
        >{{ itm.label }}</el-checkbox
      >
    </el-checkbox-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      param: {
        type: ''
      },
      typeValue: [''],
      typeList: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '文本',
          value: 1
        },
        {
          label: '课件',
          value: 2
        },
        {
          label: '视频',
          value: 3
        },
        {
          label: '音频',
          value: 4
        },
        {
          label: '图片',
          value: 5
        },
        {
          label: '其它',
          value: 6
        }
      ]
    };
  },
  methods: {
    typesChange(data) {
      this.typeValue.length > 1 ? this.typeValue.shift() : null;
      this.param.type = this.typeValue.join('');
      console.log('选择的类型值:', this.param.type);
    }
  }
};
</script>
<style lang="less" scoped>
.filters {
  .types {
    height: 50px;
    line-height: 50px;
    /deep/.el-checkbox.is-disabled {
      .el-checkbox__input {
        &.is-checked {
          & + .el-checkbox__label {
            cursor: default;
            color: #368fff;
          }
          .el-checkbox__inner {
            cursor: default;
            background-color: #368fff;
            border-color: #368fff;
            &::after {
              cursor: default;
              border-color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>

5
广告 广告

评论区