訴求：在做后臺(tái)系統(tǒng)用戶組權(quán)限這塊，后臺(tái)要求點(diǎn)擊多選框時(shí)把當(dāng)前ID傳過(guò)去

image.png

但ivew Checkbox組件文檔寫(xiě)的不全，于是研究了一番

<CheckboxGroup v-model="form.permisson" v-for="(val,index) in menuList" :key="index"  @on-change="checkAllGroupChange">
                    <b>
                        <Checkbox :label="val.moduleId" @click.native="checkGroup($event)">
                            <span>{{val.moduleUiName+val.moduleId}}</span>
                        </Checkbox>
                    </b>
                    <template v-for="(vv, kk) in val.list">
                        <p>
                            <Checkbox :key="kk" :label="vv.moduleId" @click.native="checkGroup($event)">
                                <span>{{vv.moduleUiName+vv.moduleId}}</span>
                            </Checkbox>
                        </p>
                        <p v-if="vv.list" class="last">
                            <Checkbox v-for="(v, i) in vv.list" :key="i" :label="v.moduleId" @click.native="checkGroup($event)">
                                <span>{{v.moduleApiName+v.moduleId}}</span>
                            </Checkbox>
                        </p>
                    </template>
</CheckboxGroup>

<script>
  checkAllGroupChange (data) {
      console.log(data)
  }
  checkGroup(e){
      console.log(e.target.value) //value就是label綁定的value
  }
</script>

CheckboxGroup v-model綁定所有勾選項(xiàng)，格式為數(shù)組、on-change事件可以獲取當(dāng)前所有勾選項(xiàng)，格式為數(shù)組
Checkbox用@click.native綁定點(diǎn)擊事件(直接用@click無(wú)反應(yīng))，然后在事件里進(jìn)行相應(yīng)的操作，把id傳給后臺(tái)

此時(shí)一定要接著往下看

但是寫(xiě)的過(guò)程中發(fā)現(xiàn)了iview的bug,就是CheckboxGroup v-model綁定的數(shù)組渲染時(shí)后出現(xiàn)錯(cuò)誤，會(huì)勾選錯(cuò)誤，于是只能放棄iview用原始的checkbox

<template v-for="(val,index) in menuList">
                    <b>
                        <input type="checkbox" :value="val.moduleId" v-model="val.isHaveAuth" @change="checkGroup(val)">
                        <label>{{val.moduleUiName+val.moduleId}}</label>
                    </b>
                    <template v-for="(vv, kk) in val.list">
                        <p class="second">
                            <input type="checkbox" :value="vv.moduleId" v-model="vv.isHaveAuth" @change="checkGroup(vv)">
                            <label>{{vv.moduleUiName+vv.moduleId}}</label>
                        </p>
                        <p v-if="vv.list" class="last">
                            <span v-for="(v, k) in vv.list">
                                <input type="checkbox" :value="v.moduleId" v-model="v.isHaveAuth" @change="checkGroup(v)">
                                <label>{{v.moduleApiName+v.moduleId}}</label>
                            </span>
                        </p>
                    </template>
</template>
<script>
  checkGroup(data){
      console.log(data.moduleId)
  }
</script>

用原生checkbox就靈活多了，加@click,@change都可以，而且可以把數(shù)組直接傳入方法里，也不需要$event獲取
然后渲染勾選項(xiàng)直接v-model綁定就好，不用再處理為數(shù)組

寫(xiě)到這里請(qǐng)讓我說(shuō)一聲iview垃圾?。?！
對(duì)了說(shuō)一句項(xiàng)目里用的iview2.x by the way