Cascader 級聯選擇器 數據渲染
通過 :options=“options” 映射,讓每一級都可以選擇(選項前會有圓圈可勾選)設置屬性 :props="{ checkStrictly: true }"

1、點擊后下拉框自動收起實現
設置每次監聽值變化的時候，把 dropDownVisible 屬性設置為 false 即可。（這個屬性，官網根本沒有說… ）
html部分:

<el-form-item label="菜單"><el-cascaderref="cascader"v-model="menuIDList":options="menuData":props="{value: 'id', label: 'name', children: 'child', checkStrictly:true}":placeholder="$t('operation.select')"style="width:70%;"clearable></el-cascader> </el-form-item> data() {return {menuDialog: false, // 菜單彈框selectedData: [], // 表格里已選條目數據dataList: [], // 表格數據選中的idform: {admin_menu_id: '',route_id_list: ''},menuIDList: [] // 菜單選擇數據}},watch: {menuIDList() {if (this.$refs.cascader) {this.$refs.cascader.dropDownVisible = false}}} 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue element-ui级联选择器选中后下拉框自动收起的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。