關(guān)于element ui中el-cascader的使用方式
element ui中el-cascader使用
要想實(shí)現(xiàn)進(jìn)入頁(yè)面直接選中選擇器中的選項(xiàng)
例→
那v-model綁定的值必須是數(shù)組形式的!?。╡lement ui官方文檔中沒(méi)提到這一點(diǎn)好像,我也是試了很多次才發(fā)現(xiàn)的)
代碼
<el-form-item label="分類(lèi):" prop="region" class="region"> <div class="block"> <el-cascader v-model="optionProps" //**重點(diǎn)** :options="myOptions2" :props="{ checkStrictly: true }" @change="handleChange" ></el-cascader> </div> </el-form-item>
element中el-cascader使用及自定義key名
下面展示一些 內(nèi)聯(lián)代碼片。
el-cascader的通過(guò)改變值時(shí),獲取當(dāng)前選中數(shù)據(jù)
根據(jù)接口返回?cái)?shù)據(jù),靈活定義key名
// template中的應(yīng)用 options為數(shù)據(jù) // 1.props="optionProps":props是框架屬性,optionProps為自定義data中的key //2. ref="cascaderAddr" 自定義 用來(lái) @change事件取值用 <template> <el-cascader v-model="ruleForm.address" :options="options" :props="optionProps" clearable ref="cascaderAddr" @change="cascaderChange" ></el-cascader> </template>
//定義符合自己數(shù)據(jù)的key值 <script> data() { return { optionProps: { value: "code", label: "name", children: "children", }, } }, methods: { cascaderChange() { console.log( this.$refs["cascaderAddr"].getCheckedNodes()[0].pathLabels, "選擇地址" ); // this.$refs["cascaderAddr"].getCheckedNodes()//完整的數(shù)據(jù) //this.$refs["cascaderAddr"].getCheckedNodes()[0].pathLabels//value的值 }, } </script>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- element中el-cascader級(jí)聯(lián)選擇器只有最后一級(jí)可以多選
- Vue?element-ui?el-cascader?只能末級(jí)多選問(wèn)題
- element-ui中el-cascader動(dòng)態(tài)加載和默認(rèn)值詳解
- Element-UI中<el-cascader?/>回顯失敗問(wèn)題的完美解決
- 關(guān)于element中el-cascader的使用方式
- elementui中的el-cascader級(jí)聯(lián)選擇器的實(shí)踐
- 如何使用el-cascader組件寫(xiě)下拉級(jí)聯(lián)多選及全選功能
相關(guān)文章
vue表單綁定實(shí)現(xiàn)多選框和下拉列表的實(shí)例
本篇文章主要介紹了vue表單綁定實(shí)現(xiàn)多選框和下拉列表的實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08vue3?+?elementPlus?reset重置表單問(wèn)題
這篇文章主要介紹了vue3?+?elementPlus?reset重置表單問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05vue實(shí)現(xiàn)文章評(píng)論和回復(fù)列表
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文章評(píng)論和回復(fù)列表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue2中Print.js的使用超詳細(xì)講解(pdf、html、json、image)
項(xiàng)目中有用到打印功能,網(wǎng)上就找了print.js,下面這篇文章主要給大家介紹了關(guān)于vue2中Print.js使用(pdf、html、json、image)的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03