關(guān)于element ui中el-cascader的使用方式

更新時(shí)間：2022年09月16日 09:58:17 作者：whittet.沉夢(mèng)昂志

這篇文章主要介紹了關(guān)于element ui中el-cascader的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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="分類:" 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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(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
深入淺析Vue 中 ref 的使用
在之前的前端開(kāi)發(fā)中，為了實(shí)現(xiàn)我們的需求，通常采用的方案是通過(guò) JS/Jquery 直接操縱頁(yè)面的 DOM 元素，得益于 Jquery 對(duì)于 DOM 元素優(yōu)異的操作能力，我們可以很輕易的對(duì)獲取到的 DOM 元素進(jìn)行操作。這篇文章主要介紹了Vue 中 ref 的使用 ,需要的朋友可以參考下
2019-04-04
Vue3+Vite使用雙token實(shí)現(xiàn)無(wú)感刷新
本文主要介紹了Vue3+Vite使用雙token實(shí)現(xiàn)無(wú)感刷新，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Vue項(xiàng)目中打包優(yōu)化的四種方法詳解
最近入職了新公司,接手了一個(gè)新拆分出來(lái)的Vue項(xiàng)目,針對(duì)該項(xiàng)目做了個(gè)打包優(yōu)化,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中打包優(yōu)化的四種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
如何區(qū)分vue中的v-show 與 v-if
這篇文章主要介紹了如何區(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ū)別
本文主要介紹了vue中傳參params和data的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue3如何解決Element-plus不生效的問(wèn)題
這篇文章主要介紹了Vue3如何解決Element-plus不生效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
詳解Vue-Router的安裝與使用
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。本文介紹下Vue Router的安裝與使用
2021-06-06