技術標籤：Vueelement-uiJavaScript

其實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>