關(guān)于element ui中el-cascader的使用方式
更新時(shí)間：2022年09月16日 09:58:17 作者：whittet.沉夢昂志
這篇文章主要介紹了關(guān)于element ui中el-cascader的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
element ui中el-cascader使用
要想實(shí)現(xiàn)進(jìn)入頁面直接選中選擇器中的選項(xiàng)
例→
那v-model綁定的值必須是數(shù)組形式的?。。╡lement ui官方文檔中沒提到這一點(diǎn)好像，我也是試了很多次才發(fā)現(xiàn)的）
代碼
<el-form-item label="分類:" 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的通過改變值時(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" 自定義 用來 @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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能的示例詳解
生活中常用的幾種坐標(biāo)有：WGS-84、GCJ-02與BD-09。本文將利用Vue實(shí)現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能，即實(shí)現(xiàn)GCJ-02坐標(biāo)轉(zhuǎn)換成WGS-84坐標(biāo)，需要的可以參考一下2022-04-04
SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解
這篇文章主要為大家介紹了SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯(cuò)誤解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
在之前的前端開發(fā)中，為了實(shí)現(xiàn)我們的需求，通常采用的方案是通過 JS/Jquery 直接操縱頁面的 DOM 元素，得益于 Jquery 對(duì)于 DOM 元素優(yōu)異的操作能力，我們可以很輕易的對(duì)獲取到的 DOM 元素進(jìn)行操作。這篇文章主要介紹了Vue 中 ref 的使用 ,需要的朋友可以參考下2019-04-04
Vue3+Vite使用雙token實(shí)現(xiàn)無感刷新
本文主要介紹了Vue3+Vite使用雙token實(shí)現(xiàn)無感刷新，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
最近入職了新公司,接手了一個(gè)新拆分出來的Vue項(xiàng)目,針對(duì)該項(xiàng)目做了個(gè)打包優(yōu)化,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中打包優(yōu)化的四種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了如何區(qū)分vue中的v-show 與 v-if ，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-09-09
Vue 大文件上傳和斷點(diǎn)續(xù)傳的實(shí)現(xiàn)
文件上傳在很多項(xiàng)目中都用的到，如果是幾M的很快就傳送完畢，如果是大文件呢？本文就介紹了Vue 大文件上傳和斷點(diǎn)續(xù)傳的實(shí)現(xiàn)，感興趣的可以了解一下2021-06-06
本文主要介紹了vue中傳參params和data的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue3如何解決Element-plus不生效的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。本文介紹下Vue Router的安裝與使用2021-06-06