一句话搞懂 ElementUI checkbox组件中全选多选时的 indeterminate 状态

其实indeterminate就是控制这个框的短横线样式,只要indeterminate是true无论全选没选部分选等等都是短横线状态,且indeterminate也只能控制样式!

官网代码如下: 再配合解释一下

<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        //切换全选和全不选 val为true的话全选 false为[]全不选
        this.checkedCities = val ? cityOptions : [];
        //不管是全选还是全不选,都不会是短横线所以isIndeterminate变成false
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        //当部分选择的时候样式变成短横线
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  };
</script>

猜你喜欢

转载自blog.csdn.net/a1059526327/article/details/112872657