iview 摺疊面板 Collapse 和 多選框 Checkbox 搭配 for 循環使用

需求場景：摺疊面板中有數據項，數據項有多選和全選以及取消全選的功能，摺疊面板通過數組 for 循環生成並渲染，Checkbox 與 CheckboxGroup 也是通過數組中的數據 for 循環以及綁定

遇到的問題：代碼按照邏輯寫完之後，CheckboxGroup 不能按照正常情況工作，全選和取消全選錯亂

解決辦法：全選時不要將 checkAllGroup 直接帶入運算，創建一個過渡變量，代入遍歷賦值運算，最後將運算的值賦值給 checkAllGroup

<Collapse>
      <Panel
        v-for="(fruit, index) in fruitDatas"
        :key="index"
        :name="index.toString()"
      >
        <Checkbox
          :indeterminate="fruit.isIndeterminate"
          :value="fruit.isCheck"
          @click.prevent.native.stop="
            handleFruitCheckAll(fruit.isIndeterminate, index)
          "
        ></Checkbox>
        全選

        <ul slot="content">
          <CheckboxGroup
            v-model="fruitCheckAllGroup[index]"
            @on-change="fruitCheckAllGroupChange"
          >
            <li v-for="item in fruit.datas" :key="item.id">
              <Checkbox :label="item.id"></Checkbox>
              {{ item.name }}
            </li>
          </CheckboxGroup>
        </ul>
      </Panel>
</Collapse>

export default {
  data () {
    return {
      fruitDatas: [
        {
          isCheck: false,
          isIndeterminate: true,
          datas: [
            {
              id: 1,
              name: '香蕉'
            },
            {
              id: 2,
              name: '蘋果'
            },
            {
              id: 3,
              name: '西瓜'
            }
          ]
        },
        {
          isCheck: false,
          isIndeterminate: true,
          datas: [
            {
              id: 4,
              name: '葡萄'
            },
            {
              id: 5,
              name: '橘子'
            },
            {
              id: 6,
              name: '哈密瓜'
            }
          ]
        },
        {
          isCheck: false,
          isIndeterminate: true,
          datas: [
            {
              id: 7,
              name: '聖女果'
            },
            {
              id: 8,
              name: '草莓'
            },
            {
              id: 9,
              name: '檸檬'
            }
          ]
        }
      ],
      currentIndex: null,
      fruitCheckAllGroup: [[], [], []]
    }
  },
  methods: {
    handleFruitCheckAll (isIndeterminate, currentIndex) {
      this.currentIndex = currentIndex
      this.fruitDatas.map((fruit, index) => {
        if (index === currentIndex) {
          if (isIndeterminate) {
            fruit.isCheck = false
          } else {
            fruit.isCheck = !fruit.isCheck
          }

          fruit.isIndeterminate = false

          if (fruit.isCheck) {
            // 若直接將 fruitCheckAllGroup 代入運算則全選和取消全選會出現錯亂
            let checkFrunts = []
            fruit.datas.map(item => {
              checkFrunts.push(item.id)
            })

            this.fruitCheckAllGroup[index] = checkFrunts
          } else {
            this.fruitCheckAllGroup[index] = []
          }
        }
      })
    },
    fruitCheckAllGroupChange (data) {
      this.fruitDatas.map((frunt, index) => {
        if (index === this.currentIndex) {
          if (data.length === frunt.datas.length) {
            frunt.isIndeterminate = false
            frunt.isCheck = true
          } else if (data.length > 0) {
            frunt.isIndeterminate = true
            frunt.isCheck = false
          } else {
            frunt.isIndeterminate = false
            frunt.isCheck = false
          }
        }
      })
    }
  }
}

.ivu-checkbox + span,
.ivu-checkbox-wrapper + span {
  display: none;
}

最終效果：