element-UI checkbox

数据结构：

dateList: [

    {

        id: '1',

        checkAll: false,    //  全选 v-model

        checkedCities: [],  //  多选的值

        isIndeterminate: false   

    },

    {

        id: '2',

        checkAll: false,

        checkedCities: [],

        isIndeterminate: false

    },

    {

        id: '3',

        checkAll: false,

        checkedCities: [],

        isIndeterminate: false

    },

]

//  多选框内容：

checkboxList：[

{ name: 'aaaa', code: '1'},

{ name: 'bbbb', code: '2'},

{ name: 'cccc', code: '3'},

]

HTML展示：

   

             v-model="item.checkAll" 

             @change="checkAllchange">全选

    

            

                    {{ items.name }}

    

computed: {

    checkboxListCode (){

       return this.checkboxList.map(item => item.code)

    }

}

methods:

checkAllchange（val）{

    this.dateList.forEach((item,index) => {

           if(item.checkAll){

                this.index = index

                return

            }

            this.dateList[this.index].checkedCities = val ? this.checkboxListCode  : []

              this.dateList[this.index].isIndeterminate= false

    })

}

checkChange （value）{

        this.dateList.forEach((item,index) => {

           if(item.checkoutCities === value){

                    this.index = index

                    return

            }

            const checkboxCount = value.length

            this.dateList[this.index].checkAll= checkboxCount === this.checkboxList.length

this.dateList[this.index].isIndeterminate = checkboxCount>0 &&  checkboxCount < this.checkboxList.length

        })

}