zoukankan      html  css  js  c++  java
  • el checkbox 三级选择

    原文 https://www.jb51.net/article/148826.htm只是把样式删除了,在自己的博客记录写下,下次好找

    <template>
      <div class="roleSetting">
        <div class="selection">
          <el-checkbox
            v-model="ischeckAll"
            :indeterminate="indeterminate"
            @change="handleCheckAllChange"
          >全选</el-checkbox>
        </div>
        <div
          v-for="(partition,partitionIndex) in distributorsInfo"
          :key="partitionIndex"
          class="role-box"
        >
          <div class="selection">
            <p>
              <el-checkbox
                :key="partitionIndex"
                v-model="partition.selected"
                :indeterminate="partition.indeterminate"
                @change="handleCheckedCountryAllChange(partitionIndex,partition.partitionId,$event)"
              >{{ partition.partitionName }}</el-checkbox>
            </p>
          </div>
          <div class="modules">
            <el-checkbox
              v-for="country in partition.country"
              :key="country.id"
              v-model="country.selected"
              :label="country"
              @change="handleCheckedCountryChange(partitionIndex,country.id,partition.partitionId,$event)"
            >{{ country.fieldName }}</el-checkbox>
          </div>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: "RoleSetting",
      components: {},
      props: {},
      data() {
        return {
          distributorsInfo: [
            {
              partitionName: "1区",
              selected: false,
              partitionId: 1,
              isIndeterminate: false,
              country: [
                {
                  id: "1",
                  fieldName: "奥地利",
                  selected: false
                },
                {
                  id: "2",
                  fieldName: "芬兰",
                  selected: false
                },
                {
                  id: "3",
                  fieldName: "意大利",
                  selected: false
                },
                {
                  id: "4",
                  fieldName: "葡萄牙",
                  selected: false
                },
                {
                  id: "9",
                  fieldName: "西班牙",
                  selected: false
                },
                {
                  id: "10",
                  fieldName: "瑞典",
                  selected: false
                }
              ]
            },
            {
              partitionName: "2区",
              selected: false,
              partitionId: 2,
              isIndeterminate: false,
              country: [
                {
                  id: "5",
                  fieldName: "丹麦",
                  selected: false
                },
                {
                  id: "6",
                  fieldName: "法国",
                  selected: false
                }
              ]
            },
            {
              partitionName: "3区",
              selected: false,
              partitionId: 3,
              isIndeterminate: false,
              country: [
                {
                  id: "7",
                  fieldName: "德国",
    
                  selected: false
                },
                {
                  id: "8",
                  fieldName: "瑞士",
                  selected: false
                }
              ]
            }
          ],
          ischeckAll: false, // 一级全选状态
          setDistributorDailog: false,
          cancelDistributorDailog: false,
          indeterminate: false
        };
      },
      methods: {
        handleCheckAllChange(e) {
          // 一级change事件
          this.ischeckAll = e;
          if (e == true) {
            this.indeterminate = false;
            for (let i = 0, len = this.distributorsInfo.length; i < len; i++) {
              // 二级全选反选不确定
              this.distributorsInfo[i].selected = e;
              for (
                let j = 0, len1 = this.distributorsInfo[i].country.length;
                j < len1;
                j++
              ) {
                this.distributorsInfo[i].country[j].selected = e;
              }
            }
          } else {
            this.indeterminate = false;
            for (let i = 0, len = this.distributorsInfo.length; i < len; i++) {
              // 三级全选反选不确定
              this.distributorsInfo[i].selected = e;
              for (
                let j = 0, len1 = this.distributorsInfo[i].country.length;
                j < len1;
                j++
              ) {
                this.distributorsInfo[i].country[j].selected = e;
              }
            }
          }
          console.log(this.distributorsInfo);
        },
        handleCheckedCountryAllChange(index, topId, e) {
          // 二级change事件
          this.distributorsInfo[index].selected = e; // 二级勾选后,子级全部勾选或者取消
          if (e == false) this.distributorsInfo[index].indeterminate = false; // 去掉二级不确定状态
          let childrenArray = this.distributorsInfo[index].country;
          if (childrenArray) {
            for (let i = 0, len = childrenArray.length; i < len; i++) {
              childrenArray[i].selected = e;
            }
          }
    
          this.getIsCheckAll();
        },
        handleCheckedCountryChange(topIndex, sonId, topId, e) {
          // 三级change事件
          let childrenArray = this.distributorsInfo[topIndex].country;
          let tickCount = 0;
          let unTickCount = 0;
          let len = childrenArray.length;
          for (let i = 0; i < len; i++) {
            if (sonId == childrenArray[i].id) childrenArray[i].selected = e;
            if (childrenArray[i].selected == true) tickCount++;
            if (childrenArray[i].selected == false) unTickCount++;
          }
          if (tickCount == len) {
            // 三级级全勾选
            this.distributorsInfo[topIndex].selected = true;
            this.distributorsInfo[topIndex].indeterminate = false;
          } else if (unTickCount == len) {
            // 三级级全不勾选
            this.distributorsInfo[topIndex].selected = false;
            this.distributorsInfo[topIndex].indeterminate = false;
          } else {
            this.distributorsInfo[topIndex].selected = false;
            this.distributorsInfo[topIndex].indeterminate = true; // 添加二级不确定状态
          }
    
          this.getIsCheckAll();
        },
        getIsCheckAll() {
          let tickCount = 0;
          let unTickCount = 0;
          let ArrLength = this.distributorsInfo.length;
          for (let j = 0; j < ArrLength; j++) {
            // 全选checkbox状态
            if (this.distributorsInfo[j].selected == true) tickCount++;
            if (this.distributorsInfo[j].selected == false) unTickCount++;
          }
          if (tickCount == ArrLength) {
            // 二级全勾选
            this.ischeckAll = true;
            this.indeterminate = false;
          } else if (unTickCount == ArrLength) {
            // 二级全不勾选
            this.ischeckAll = false;
            this.indeterminate = false;
          } else {
            this.ischeckAll = false;
            this.indeterminate = true; // 添加一级不确定状态
          }
          console.log("0111", this.distributorsInfo);
        }
      }
    };
    </script>
    <style lang="scss">
    .modules {
      margin-left: 25px;
    }
    </style>
  • 相关阅读:
    CodeForces 19D Points (线段树+set)
    FZU 2105 Digits Count
    HDU 5618 Jam's problem again(三维偏序,CDQ分治,树状数组,线段树)
    HDU 5634 Rikka with Phi (线段树)
    Java实现 蓝桥杯 算法提高 转圈游戏(暴力快速幂)
    Java实现 蓝桥杯 算法提高 转圈游戏(暴力快速幂)
    Java实现 蓝桥杯 算法提高 转圈游戏(暴力快速幂)
    Java实现 蓝桥杯 算法提高VIP Substrings(暴力)
    Java实现 蓝桥杯 算法提高VIP Substrings(暴力)
    Java实现 蓝桥杯 算法提高VIP Substrings(暴力)
  • 原文地址:https://www.cnblogs.com/sweetC/p/14738839.html
Copyright © 2011-2022 走看看