Element-ui中的Cascader級(jí)聯(lián)選擇器基礎(chǔ)用法
更新時(shí)間：2023年06月26日 09:37:44 作者：菜園前端
這篇文章主要為大家介紹了Element-ui中的Cascader級(jí)聯(lián)選擇器基礎(chǔ)用法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
Element-ui 中的 Cascader 級(jí)聯(lián)選擇器
當(dāng)一個(gè)數(shù)據(jù)集合有清晰的層級(jí)結(jié)構(gòu)時(shí)，可通過(guò)級(jí)聯(lián)選擇器逐級(jí)查看并選擇。
按需引入方式
如果是完整引入可跳過(guò)此步驟
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級(jí)聯(lián)選擇器基礎(chǔ)用法的詳細(xì)內(nèi)容，更多關(guān)于Elementui Cascader的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue中使用ueditor富文本編輯器的相關(guān)資料,需要的朋友可以參考下2018-02-02
淺談element中InfiniteScroll按需引入的一點(diǎn)注意事項(xiàng)
這篇文章主要介紹了淺談element中InfiniteScroll按需引入的一點(diǎn)注意事項(xiàng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了詳解vue-router 初始化時(shí)做了什么,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
這篇文章主要為大家介紹了vue3自定義插件的作用場(chǎng)景及使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了在vue中如何封裝G2圖表，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3項(xiàng)目中預(yù)覽并打印PDF的兩種方法
最近在項(xiàng)目開發(fā)中碰到一個(gè)需求是在頁(yè)面中展示pdf預(yù)覽功能,下面這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目中預(yù)覽并打印PDF的兩種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
html5-qrcode是一個(gè)基于JavaScript?輕量級(jí)和跨平臺(tái)的掃碼插件,允許用戶使用攝像頭掃描二維碼,并且解析為文本或者url,本文給大家介紹了vue實(shí)現(xiàn)h5掃碼,需要的朋友可以參考下2024-01-01
vue如何實(shí)現(xiàn)未登錄不能訪問(wèn)某些頁(yè)面
這篇文章主要介紹了vue如何實(shí)現(xiàn)未登錄不能訪問(wèn)某些頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue登錄攔截 登錄后繼續(xù)跳轉(zhuǎn)指定頁(yè)面的操作
這篇文章主要介紹了Vue登錄攔截 登錄后繼續(xù)跳轉(zhuǎn)指定頁(yè)面的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue動(dòng)態(tài)路由:路由參數(shù)改變,視圖不更新問(wèn)題的解決
今天小編就為大家分享一篇vue動(dòng)態(tài)路由:路由參數(shù)改變,視圖不更新問(wèn)題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11