vue+ElementUI中的多选框中的不确定状态

最新推荐文章于 2023-09-20 14:50:58 发布

这个世界太疯狂了

最新推荐文章于 2023-09-20 14:50:58 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： elementUI

本文链接：https://blog.youkuaiyun.com/weixin_43373818/article/details/90202926

elementUI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在ElementUI中利用indeterminate和checkAll属性实现复选框组的不确定状态，详细解释了其工作原理及示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用indeterminate与checkAll控制不确定状态

checkbox有三种状态全选(显示的'√'),选中部分(显示的'-'),全不选(啥都没显示)
对于indeterminate和v-model绑定的a和b的值
如果true true 或者 true false样式为-
如果false true样式为√
如果false false样式为不勾

示例为elementUI官网上的案例

<template>
  <div>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" >全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  name: "checkbox",
  data() {
    return {
      checkAll: false,
      checkedCities: ["上海", "北京"],
      cities: cityOptions,
      isIndeterminate: true
    };
  },
  methods: {
    handleCheckAllChange(val) {
      //val值为布尔类型的值，若val为false则this.checkedCities为空，否则全部选中
      this.checkedCities = val ? cityOptions : [];
      //设置isIndeterminate，看model的布尔值，要么全选要么全不选
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      //获取修改过的cities的值的长度
      let checkedCount = value.length;
      //当修改后的长度=全部的长度则为true，否则为false
      this.checkAll = checkedCount === this.cities.length;
      //当修改后的长度不等于全部的长度时，isIndeterminate为false
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    }
  }
};
</script>