鍍金池/ 問(wèn)答/HTML/ element ui Cascader 級(jí)聯(lián)選擇器 想支持多選怎么實(shí)現(xiàn)

element ui Cascader 級(jí)聯(lián)選擇器 想支持多選怎么實(shí)現(xiàn)

用的element ui的級(jí)聯(lián)選擇器 想實(shí)現(xiàn)可以支持多選 以tag的形式顯示在欄里 如圖
clipboard.png
html代碼

    <el-cascader
        :options="options"
        :show-all-levels="false"
        v-model="selectedOptions"
        @change="addOption"
      ></el-cascader>

在每次的change回調(diào)里 會(huì)得到一個(gè)[父級(jí)value,子集value] 我想只顯示子集value 然后實(shí)現(xiàn)多選的效果
本來(lái)想的是在每次的change回調(diào)里 動(dòng)態(tài)的給selectedOptions push進(jìn)去當(dāng)前的value ,selectedOptions格式為[[父級(jí)value,子集value],[父級(jí)value,子集value]],但是沒(méi)有實(shí)現(xiàn)。不知道有沒(méi)有人實(shí)現(xiàn)過(guò)

回答
編輯回答
執(zhí)念

自己寫了個(gè)div 定位在級(jí)聯(lián)選擇器的位置

clipboard.png
在級(jí)聯(lián)選擇器的回調(diào)里 清空它的selectedOptions 給為tag在data里定義的name里push進(jìn)去 子集value

clipboard.png
實(shí)現(xiàn)類似效果

clipboard.png

2017年7月21日 08:09