1. Cascader級聯(lián)選擇器

1.1. 當(dāng)一個數(shù)據(jù)集合有清晰的層級結(jié)構(gòu)時, 可通過級聯(lián)選擇器逐級查看并選擇。

1.2. Cascader屬性

參數(shù)	說明	類型	可選值	默認(rèn)值
value / v-model	選中項綁定值	無	無	無
options	可選項數(shù)據(jù)源, 鍵名可通過Props屬性配置	array	無	無
props	配置選項, 具體見下表	object	無	無
size	尺寸	string	medium / small / mini	無
placeholder	輸入框占位文本	string	無	請選擇
disabled	是否禁用	boolean	無	false
clearable	是否支持清空選項	boolean	無	false
show-all-levels	輸入框中是否顯示選中值的完整路徑	boolean	無	true
collapse-tags	多選模式下是否折疊Tag	boolean	無	false
separator	選項分隔符	string	無	斜杠' / '
filterable	是否可搜索選項	boolean	無	無
filter-method	自定義搜索邏輯, 第一個參數(shù)是節(jié)點node, 第二個參數(shù)是搜索關(guān)鍵詞keyword, 通過返回布爾值表示是否命中	function(node, keyword)	無	無
debounce	搜索關(guān)鍵詞輸入的去抖延遲, 毫秒	number	無	300
before-filter	篩選之前的鉤子, 參數(shù)為輸入的值, 若返回false或者返回Promise且被reject, 則停止篩選	function(value)	無	無
popper-class	自定義浮層類名	string	無	無

1.3. Cascader事件

事件名稱	說明	回調(diào)參數(shù)
change	當(dāng)選中節(jié)點變化時觸發(fā)	選中節(jié)點的值
expand-change	當(dāng)展開節(jié)點發(fā)生變化時觸發(fā)	各父級選項值組成的數(shù)組
blur	當(dāng)失去焦點時觸發(fā)	(event: Event)
focus	當(dāng)獲得焦點時觸發(fā)	(event: Event)
visible-change	下拉框出現(xiàn)/隱藏時觸發(fā)	出現(xiàn)則為true, 隱藏則為false
remove-tag	在多選模式下, 移除Tag時觸發(fā)	移除的Tag對應(yīng)的節(jié)點的值

1.4. Cascader方法

事件名稱	說明	參數(shù)
getCheckedNodes	獲取選中的節(jié)點	(leafOnly)是否只是葉子節(jié)點, 默認(rèn)值為false

1.5. Cascader?Slots

名稱	說明
-	自定義備選項的節(jié)點內(nèi)容, 參數(shù)為{ node, data }, 分別為當(dāng)前節(jié)點的Node對象和數(shù)據(jù)
empty	無匹配選項時的內(nèi)容

1.6. CascaderPanel屬性

參數(shù)	說明	類型
value / v-model	選中項綁定值	無
options	可選項數(shù)據(jù)源, 鍵名可通過Props屬性配置	array
props	配置選項, 具體見下表	object

1.7. CascaderPanel事件

事件名稱	說明	回調(diào)參數(shù)
change	當(dāng)選中節(jié)點變化時觸發(fā)	選中節(jié)點的值
expand-change	當(dāng)展開節(jié)點發(fā)生變化時觸發(fā)	各父級選項值組成的數(shù)組

1.8. CascaderPanel方法

方法名	說明	參數(shù)
getCheckedNodes	獲取選中的節(jié)點數(shù)組	(leafOnly)是否只是葉子節(jié)點, 默認(rèn)值為false
clearCheckedNodes	清空選中的節(jié)點	無

1.9. CascaderPanel?Slots

名稱	說明
-	自定義備選項的節(jié)點內(nèi)容, 參數(shù)為{ node, data }, 分別為當(dāng)前節(jié)點的Node對象和數(shù)據(jù)

1.10. Props

參數(shù)	說明	類型	可選值	默認(rèn)值
expandTrigger	次級菜單的展開方式	string	click / hover	'click'
multiple	是否多選	boolean	無	false
checkStrictly	是否嚴(yán)格的遵守父子節(jié)點不互相關(guān)聯(lián)	boolean	無	false
emitPath	在選中節(jié)點改變時, 是否返回由該節(jié)點所在的各級菜單的值所組成的數(shù)組, 若設(shè)置false, 則只返回該節(jié)點的值	boolean	無	true
lazy	是否動態(tài)加載子節(jié)點, 需與lazyLoad方法結(jié)合使用	boolean	無	false
lazyLoad	加載動態(tài)數(shù)據(jù)的方法, 僅在lazy為true時有效	function(node, resolve), node為當(dāng)前點擊的節(jié)點, resolve為數(shù)據(jù)加載完成的回調(diào)(必須調(diào)用)	無	無
value	指定選項的值為選項對象的某個屬性值	string	無	'value'
label	指定選項標(biāo)簽為選項對象的某個屬性值	string	無	'label'
children	指定選項的子選項為選項對象的某個屬性值	string	無	'children'
disabled	指定選項的禁用為選項對象的某個屬性值	string	無	'disabled'
leaf	指定選項的葉子節(jié)點的標(biāo)志位為選項對象的某個屬性值	string	無	'leaf'

2. Cascader級聯(lián)選擇器例子

2.1. 使用腳手架新建一個名為element-ui-cascader的前端項目, 同時安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Cascader from '../components/Cascader.vue' import DisabledCascader from '../components/DisabledCascader.vue' import ClearableCascader from '../components/ClearableCascader.vue' import MultipleCascader from '../components/MultipleCascader.vue' import CheckStrictlyCascader from '../components/CheckStrictlyCascader.vue' import LazyCascader from '../components/LazyCascader.vue' import SearchCascader from '../components/SearchCascader.vue' import ScopedCascader from '../components/ScopedCascader.vue' import PanelCascader from '../components/PanelCascader.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Cascader' },{ path: '/Cascader', component: Cascader },{ path: '/DisabledCascader', component: DisabledCascader },{ path: '/ClearableCascader', component: ClearableCascader },{ path: '/MultipleCascader', component: MultipleCascader },{ path: '/CheckStrictlyCascader', component: CheckStrictlyCascader },{ path: '/LazyCascader', component: LazyCascader },{ path: '/SearchCascader', component: SearchCascader },{ path: '/ScopedCascader', component: ScopedCascader },{ path: '/PanelCascader', component: PanelCascader } ]const router = new VueRouter({routes })export default router

2.3. 在components下創(chuàng)建Cascader.vue

<template><div><h1>基礎(chǔ)用法-有兩種觸發(fā)子菜單的方式</h1><h4>只需為Cascader的options屬性指定選項數(shù)組即可渲染出一個級聯(lián)選擇器。通過props.expandTrigger可以定義展開子級菜單的觸發(fā)方式。</h4><el-row><el-col :span="5"><span>默認(rèn)click觸發(fā)子菜單: </span><el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader></el-col><el-col :span="5"><span>hover觸發(fā)子菜單: </span><el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader></el-col></el-row></div> </template><script> export default {data () {return {value: [],options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '設(shè)計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導(dǎo)航',children: [{value: 'cexiangdaohang',label: '側(cè)向?qū)Ш?#39;}, {value: 'dingbudaohang',label: '頂部導(dǎo)航'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]}},methods: {handleChange (value) {console.log(value)}} } </script>

2.4. 在components下創(chuàng)建DisabledCascader.vue

<template><div><h1>禁用選項-通過在數(shù)據(jù)源中設(shè)置disabled字段來聲明該選項是禁用的</h1><h4>options指定的數(shù)組中的第一個元素含有disabled: true鍵值對, 因此是禁用的。在默認(rèn)情況下, Cascader會檢查數(shù)據(jù)中每一項的disabled字段是否為true, 如果你的數(shù)據(jù)中表示禁用含義的字段名不為disabled, 可以通過props.disabled屬性來指定(詳見下方API表格)。當(dāng)然, value、label和children這三個字段名也可以通過同樣的方式指定。</h4><el-cascader :options="options"></el-cascader></div> </template><script> export default {data () {return {options: [{value: 'zhinan',label: '指南',disabled: true,children: [{value: 'shejiyuanze',label: '設(shè)計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導(dǎo)航',children: [{value: 'cexiangdaohang',label: '側(cè)向?qū)Ш?#39;}, {value: 'dingbudaohang',label: '頂部導(dǎo)航'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]}} } </script>

2.5. 在components下創(chuàng)建ClearableCascader.vue

<template><div><h1>可清空</h1><h4>通過clearable設(shè)置輸入框可清空。</h4><el-cascader :options="options" clearable></el-cascader><h1>僅顯示最后一級</h1><h4>可以僅在輸入框中顯示選中項最后一級的標(biāo)簽, 而不是選中項所在的完整路徑。屬性show-all-levels定義了是否顯示完整的路徑, 將其賦值為false則僅顯示最后一級。</h4><el-cascader :options="options" :show-all-levels="false"></el-cascader></div> </template><script> export default {data () {return {options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '設(shè)計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導(dǎo)航',children: [{value: 'cexiangdaohang',label: '側(cè)向?qū)Ш?#39;}, {value: 'dingbudaohang',label: '頂部導(dǎo)航'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]}} } </script>

2.6. 在components下創(chuàng)建MultipleCascader.vue

<template><div><h1>多選</h1><h4>可通過props.multiple = true來開啟多選模式。在開啟多選模式后, 默認(rèn)情況下會展示所有已選中的選項的Tag, 你可以使用collapse-tags來折疊Tag。</h4><el-row><el-col :span="5"><span>默認(rèn)顯示所有Tag: </span><el-cascader :options="options" :props="props" clearable></el-cascader></el-col><el-col :span="5"><span>折疊展示Tag: </span><el-cascader :options="options" :props="props" collapse-tags clearable></el-cascader></el-col></el-row></div> </template><script> export default {data () {return {props: { multiple: true },options: [{value: 1,label: '東南',children: [{value: 2,label: '上海',children: [{ value: 3, label: '普陀' },{ value: 4, label: '黃埔' },{ value: 5, label: '徐匯' }]}, {value: 7,label: '江蘇',children: [{ value: 8, label: '南京' },{ value: 9, label: '蘇州' },{ value: 10, label: '無錫' }]}, {value: 12,label: '浙江',children: [{ value: 13, label: '杭州' },{ value: 14, label: '寧波' },{ value: 15, label: '嘉興' }]}]}, {value: 17,label: '西北',children: [{value: 18,label: '陜西',children: [{ value: 19, label: '西安' },{ value: 20, label: '延安' }]}, {value: 21,label: '新疆維吾爾族自治區(qū)',children: [{ value: 22, label: '烏魯木齊' },{ value: 23, label: '克拉瑪依' }]}]}]}} } </script>

2.7. 在components下創(chuàng)建CheckStrictlyCascader.vue

<template><div><h1>選擇任意一級選項</h1><h4>在單選模式下, 你只能選擇葉子節(jié)點; 而在多選模式下, 勾選父節(jié)點真正選中的都是葉子節(jié)點。啟用該功能后, 可讓父子節(jié)點取消關(guān)聯(lián), 選擇任意一級選項。可通過props.checkStrictly = true來設(shè)置父子節(jié)點取消選中關(guān)聯(lián), 從而達(dá)到選擇任意一級選項的目的。</h4><el-row><el-col :span="5"><span>單選選擇任意一級選項: </span><el-cascader :options="options" :props="{ checkStrictly: true }" clearable></el-cascader></el-col><el-col :span="5"><span>多選選擇任意一級選項: </span><el-cascader :options="options" :props="{ multiple: true, checkStrictly: true }" collapse-tags clearable></el-cascader></el-col></el-row></div> </template><script> export default {data () {return {options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '設(shè)計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導(dǎo)航',children: [{value: 'cexiangdaohang',label: '側(cè)向?qū)Ш?#39;}, {value: 'dingbudaohang',label: '頂部導(dǎo)航'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]}} } </script>

2.8. 在components下創(chuàng)建LazyCascader.vue

<template><div><h1>動態(tài)加載-當(dāng)選中某一級時, 動態(tài)加載該級下的選項</h1><h4>通過lazy開啟動態(tài)加載, 并通過lazyload來設(shè)置加載數(shù)據(jù)源的方法。lazyload方法有兩個參數(shù), 第一個參數(shù)node為當(dāng)前點擊的節(jié)點, 第二個resolve為數(shù)據(jù)加載完成的回調(diào)(必須調(diào)用)。為了更準(zhǔn)確的顯示節(jié)點的狀態(tài), 還可以對節(jié)點數(shù)據(jù)添加是否為葉子節(jié)點的標(biāo)志位(默認(rèn)字段為leaf, 可通過props.leaf修改), 否則會簡單的以有無子節(jié)點來判斷是否為葉子節(jié)點。</h4><el-cascader :props="props"></el-cascader></div> </template><script> let id = 0export default {data () {return {props: {lazy: true,lazyLoad (node, resolve) {const { level } = nodesetTimeout(() => {const nodes = Array.from({ length: level + 1 }).map(item => ({value: ++id,label: `選項${id}`,leaf: level >= 2}))// 通過調(diào)用resolve將子節(jié)點數(shù)據(jù)返回, 通知組件數(shù)據(jù)加載完成resolve(nodes)}, 1000)}}}} } </script>

2.9. 在components下創(chuàng)建SearchCascader.vue

<template><div><h1>可搜索-可以快捷地搜索選項并選擇</h1><h4>將filterable賦值為true即可打開搜索功能, 默認(rèn)會匹配節(jié)點的label或所有父節(jié)點的label(由show-all-levels決定)中包含輸入值的選項。你也可以用filter-method自定義搜索邏輯, 接受一個函數(shù), 第一個參數(shù)是節(jié)點node, 第二個參數(shù)是搜索關(guān)鍵詞keyword, 通過返回布爾值表示是否命中。</h4><el-row><el-col :span="5"><span>單選可搜索: </span><el-cascader placeholder="試試搜索: 指南" :options="options" filterable></el-cascader></el-col><el-col :span="5"><span>多選可搜索: </span><el-cascader placeholder="試試搜索: 指南" :options="options" :props="{ multiple: true }" filterable></el-cascader></el-col></el-row></div> </template><script> export default {data () {return {options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '設(shè)計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導(dǎo)航',children: [{value: 'cexiangdaohang',label: '側(cè)向?qū)Ш?#39;}, {value: 'dingbudaohang',label: '頂部導(dǎo)航'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]}} } </script>

2.10. 在components下創(chuàng)建ScopedCascader.vue

<template><div><h1>自定義節(jié)點內(nèi)容-可以自定義備選項的節(jié)點內(nèi)容</h1><h4>可以通過scoped slot對級聯(lián)選擇器的備選項的節(jié)點內(nèi)容進(jìn)行自定義, scoped slot會傳入兩個字段node和data, 分別表示當(dāng)前節(jié)點的Node對象和數(shù)據(jù)。</h4><el-cascader :options="options"><template slot-scope="{ node, data }"><span>{{ data.label }}</span><span v-if="!node.isLeaf"> ({{ data.children.length }}) </span></template></el-cascader></div> </template><script> export default {data () {return {options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '設(shè)計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導(dǎo)航',children: [{value: 'cexiangdaohang',label: '側(cè)向?qū)Ш?#39;}, {value: 'dingbudaohang',label: '頂部導(dǎo)航'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]}} } </script>

2.11. 在components下創(chuàng)建PanelCascader.vue

<template><div><h1>級聯(lián)面板</h1><h4>級聯(lián)面板是級聯(lián)選擇器的核心組件, 與級聯(lián)選擇器一樣, 有單選、多選、動態(tài)加載等多種功能。和級聯(lián)選擇器一樣, 通過options來指定選項, 也可通過props來設(shè)置多選、動態(tài)加載等功能, 具體詳情見API。</h4><el-cascader-panel :options="options"></el-cascader-panel></div> </template><script> export default {data () {return {options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '設(shè)計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導(dǎo)航',children: [{value: 'cexiangdaohang',label: '側(cè)向?qū)Ш?#39;}, {value: 'dingbudaohang',label: '頂部導(dǎo)航'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]}} } </script>

2.12. 運(yùn)行項目, 訪問http://localhost:8080/#/Cascader

2.13. 運(yùn)行項目, 訪問http://localhost:8080/#/DisabledCascader

2.14. 運(yùn)行項目, 訪問http://localhost:8080/#/ClearableCascader?

2.15. 運(yùn)行項目, 訪問http://localhost:8080/#/MultipleCascader

2.16. 運(yùn)行項目, 訪問http://localhost:8080/#/CheckStrictlyCascader?

2.17. 運(yùn)行項目, 訪問http://localhost:8080/#/LazyCascader?

2.18. 運(yùn)行項目, 訪問http://localhost:8080/#/SearchCascader?

2.19. 運(yùn)行項目, 訪問http://localhost:8080/#/ScopedCascader?

?2.20. 運(yùn)行項目, 訪問http://localhost:8080/#/PanelCascader

總結(jié)

以上是生活随笔為你收集整理的011_Cascader级联选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。