Element-ui中的Cascader級聯(lián)選擇器基礎(chǔ)用法
更新時(shí)間：2023年06月26日 09:37:44 作者：菜園前端
這篇文章主要為大家介紹了Element-ui中的Cascader級聯(lián)選擇器基礎(chǔ)用法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
Element-ui 中的 Cascader 級聯(lián)選擇器
當(dāng)一個(gè)數(shù)據(jù)集合有清晰的層級結(jié)構(gòu)時(shí)，可通過級聯(lián)選擇器逐級查看并選擇。
按需引入方式
如果是完整引入可跳過此步驟
import Vue from 'vue'
import { Cascader } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/cascader.css'
Vue.use(Cascader)基礎(chǔ)用法
<template>
<el-cascader v-model="value" :options="options"></el-cascader>
</template>
<script>
export default {
data() {
return {
value: [],
options: [
{
value: 'zhinan',
label: '輔助',
children: [
{
value: 'caiwenji',
label: '蔡文姬'
},
{
value: 'xiaoming',
label: '小明'
}
]
},
{
value: 'zujian',
label: '中單',
children: [
{
value: 'zhenji',
label: '甄姬'
},
{
value: 'xiaoqiao',
label: '小喬'
}
]
},
{
value: 'sheshou',
label: '射手',
children: [
{
value: 'make',
label: '馬可波羅'
},
{
value: 'sunshangxiang',
label: '孫尚香'
}
]
}
]
}
}
}
</script>Cascader Attributes
以上就是Element-ui中的Cascader級聯(lián)選擇器基礎(chǔ)用法的詳細(xì)內(nèi)容，更多關(guān)于Elementui Cascader的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
默認(rèn)生成的目錄結(jié)構(gòu)不滿足我們的開發(fā)需求,所以這里需要做一些自定義改動(dòng),本文給大家分享Vue3目錄調(diào)整方案,感興趣的朋友一起看看吧2023-11-11
vue3實(shí)現(xiàn)對自定義組件自由拖動(dòng)效果
在數(shù)據(jù)可視化看板開發(fā)中,組件的自由拖拽功能能極大提升交互體驗(yàn),本文將基于Vue3生態(tài),從零開始解析如何實(shí)現(xiàn)一個(gè)支持自由拖拽的容器組件,感興趣的朋友一起看看吧2025-04-04
Vue數(shù)據(jù)改變但頁面沒有變的幾種情況及解決方法
如果,你發(fā)現(xiàn)自己需要在Vue中做一次強(qiáng)制更新,99.99%的情況,是你在某個(gè)地方做錯(cuò)了事,所以本文給大家介紹了Vue數(shù)據(jù)改變但頁面沒有變的幾種情況及解決方法,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
這篇文章主要給大家詳細(xì)介紹一下Vue3中的基本語法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue3有一定的幫助，感興趣的小伙伴可以了解一下2022-11-11
在Vue3中為路由Query參數(shù)標(biāo)注類型的方法
這篇文章主要介紹了在Vue3中如何為路由Query參數(shù)標(biāo)注類型,我們就針對這個(gè)話題如何為路由Query參數(shù)標(biāo)注類型為例,看看Composable和IOC容器的代碼風(fēng)格究竟有什么不同,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue緩存組件keepalive的相關(guān)資料,keep-alive組件是使用 include exclude這兩個(gè)屬性傳入組件名稱來確認(rèn)哪些可以被緩存的，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-08-08
vue中使用refs定位dom出現(xiàn)undefined的解決方法
本篇文章主要介紹了vue中使用refs定位dom出現(xiàn)undefined的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
最近遇到一個(gè)需求,需要把內(nèi)容下載生成pdf文件,但轉(zhuǎn)換過程中內(nèi)容總是會(huì)被截?cái)?就很難受,從網(wǎng)上找到了解決辦法分享給大家,這篇文章主要給大家介紹了關(guān)于vue生成pdf文件步驟及pdf分頁隔斷處理的相關(guān)資料,需要的朋友可以參考下2024-02-02
vite打包只生成了一個(gè)css和js文件問題的解決方法
今天整了一個(gè)項(xiàng)目,試了下打包,發(fā)下打包后只生成了一個(gè)css文件,和一個(gè)js文件,這樣肯定是不行的,因?yàn)檫@樣這個(gè)文件的包大小很大,第一次訪問會(huì)導(dǎo)致白屏問題,所以本文給大家介紹了vite打包只生成了一個(gè)css和js文件問題的解決方法,需要的朋友可以參考下2024-05-05
本文主要介紹了el-table表頭文字換行的三種方式，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11