鍍金池/ 問答/HTML/ vue + element 怎么實(shí)現(xiàn)分組全選,求大佬幫忙

vue + element 怎么實(shí)現(xiàn)分組全選,求大佬幫忙

問題描述:用的是vue+element 怎么讓分組全選的全選按鈕互不影響

html部分:

<el-form-item label="附議人:">
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox>
      <div style="margin: 10px 0;"></div>
    <div v-for="(city, group_index) in cities">
    <span>{{city.label}}</span>
    <el-checkbox style="margin-left:30px;" :indeterminate="isIndeterminate" v-model="checkPart" @change="checkPartChange(checkPart, group_index)">全選</el-checkbox>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="a in city.children" :label="a.value">{{a.label}}</el-checkbox>
    </el-checkbox-group>
    </div>
</el-form-item>

vue.js部分:

export default {
    data(){
        return{
            checkAll: false,
            checkPart:false,
            checkedCities: [],
            cities:[
              {
              value:'1',
              label:'第二代表團(tuán)',
              children:[
                {value: '1', label: '張三1',},
                {value: '2', label: '張三2',},
                {value: '3', label: '張三3',},
              ]
            },
              {
                value:'2',
                label:'第三代表團(tuán)',
                children:[
                  {value: '4', label: '張三4',},
                  {value: '5', label: '張三5',},
                  {value: '6', label: '張三6',},
                ]
              },
              {
                value:'3',
                label:'第三代表團(tuán)',
                children:[
                  {value: '7', label: '張三7',},
                  {value: '8', label: '張三8',},
                  {value: '9', label: '張三9',},
                ]
              },
            ],
            isIndeterminate: true
        
        }
    },
    methods:{
        checkPartChange(val,group_index){
        var group_val = []
        var city = this.cities[group_index].children
        if(val){
          for(var i = 0; i<city.length; i++){
            group_val[i] = city[i]['value']
          }
        }
        this.checkedCities = group_val;
        this.isIndeterminate = false;
      },
    }
}
目前的效果圖:

clipboard.png

回答
編輯回答
撥弦
2018年2月17日 20:01