1. Cascader級聯選擇器

1.1. 當一個數據集合有清晰的層級結構時, 可通過級聯選擇器逐級查看并選擇。

1.2. Cascader屬性

參數	說明	類型	可選值	默認值
value / v-model	選中項綁定值	無	無	無
options	可選項數據源, 鍵名可通過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	自定義搜索邏輯, 第一個參數是節點node, 第二個參數是搜索關鍵詞keyword, 通過返回布爾值表示是否命中	function(node, keyword)	無	無
debounce	搜索關鍵詞輸入的去抖延遲, 毫秒	number	無	300
before-filter	篩選之前的鉤子, 參數為輸入的值, 若返回false或者返回Promise且被reject, 則停止篩選	function(value)	無	無
popper-class	自定義浮層類名	string	無	無

1.3. Cascader事件

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

1.4. Cascader方法

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

1.5. Cascader?Slots

名稱	說明
-	自定義備選項的節點內容, 參數為{ node, data }, 分別為當前節點的Node對象和數據
empty	無匹配選項時的內容

1.6. CascaderPanel屬性

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

1.7. CascaderPanel事件

事件名稱	說明	回調參數
change	當選中節點變化時觸發	選中節點的值
expand-change	當展開節點發生變化時觸發	各父級選項值組成的數組

1.8. CascaderPanel方法

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

1.9. CascaderPanel?Slots

名稱	說明
-	自定義備選項的節點內容, 參數為{ node, data }, 分別為當前節點的Node對象和數據

1.10. Props

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

2. Cascader級聯選擇器例子

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下創建Cascader.vue

<template><div><h1>基礎用法-有兩種觸發子菜單的方式</h1><h4>只需為Cascader的options屬性指定選項數組即可渲染出一個級聯選擇器。通過props.expandTrigger可以定義展開子級菜單的觸發方式。</h4><el-row><el-col :span="5"><span>默認click觸發子菜單: </span><el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader></el-col><el-col :span="5"><span>hover觸發子菜單: </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: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {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下創建DisabledCascader.vue

<template><div><h1>禁用選項-通過在數據源中設置disabled字段來聲明該選項是禁用的</h1><h4>options指定的數組中的第一個元素含有disabled: true鍵值對, 因此是禁用的。在默認情況下, Cascader會檢查數據中每一項的disabled字段是否為true, 如果你的數據中表示禁用含義的字段名不為disabled, 可以通過props.disabled屬性來指定(詳見下方API表格)。當然, 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: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]}} } </script>

2.5. 在components下創建ClearableCascader.vue

<template><div><h1>可清空</h1><h4>通過clearable設置輸入框可清空。</h4><el-cascader :options="options" clearable></el-cascader><h1>僅顯示最后一級</h1><h4>可以僅在輸入框中顯示選中項最后一級的標簽, 而不是選中項所在的完整路徑。屬性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: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]}} } </script>

2.6. 在components下創建MultipleCascader.vue

<template><div><h1>多選</h1><h4>可通過props.multiple = true來開啟多選模式。在開啟多選模式后, 默認情況下會展示所有已選中的選項的Tag, 你可以使用collapse-tags來折疊Tag。</h4><el-row><el-col :span="5"><span>默認顯示所有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: '新疆維吾爾族自治區',children: [{ value: 22, label: '烏魯木齊' },{ value: 23, label: '克拉瑪依' }]}]}]}} } </script>

2.7. 在components下創建CheckStrictlyCascader.vue

<template><div><h1>選擇任意一級選項</h1><h4>在單選模式下, 你只能選擇葉子節點; 而在多選模式下, 勾選父節點真正選中的都是葉子節點。啟用該功能后, 可讓父子節點取消關聯, 選擇任意一級選項。可通過props.checkStrictly = true來設置父子節點取消選中關聯, 從而達到選擇任意一級選項的目的。</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: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]}} } </script>

2.8. 在components下創建LazyCascader.vue

<template><div><h1>動態加載-當選中某一級時, 動態加載該級下的選項</h1><h4>通過lazy開啟動態加載, 并通過lazyload來設置加載數據源的方法。lazyload方法有兩個參數, 第一個參數node為當前點擊的節點, 第二個resolve為數據加載完成的回調(必須調用)。為了更準確的顯示節點的狀態, 還可以對節點數據添加是否為葉子節點的標志位(默認字段為leaf, 可通過props.leaf修改), 否則會簡單的以有無子節點來判斷是否為葉子節點。</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}))// 通過調用resolve將子節點數據返回, 通知組件數據加載完成resolve(nodes)}, 1000)}}}} } </script>

2.9. 在components下創建SearchCascader.vue

<template><div><h1>可搜索-可以快捷地搜索選項并選擇</h1><h4>將filterable賦值為true即可打開搜索功能, 默認會匹配節點的label或所有父節點的label(由show-all-levels決定)中包含輸入值的選項。你也可以用filter-method自定義搜索邏輯, 接受一個函數, 第一個參數是節點node, 第二個參數是搜索關鍵詞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: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]}} } </script>

2.10. 在components下創建ScopedCascader.vue

<template><div><h1>自定義節點內容-可以自定義備選項的節點內容</h1><h4>可以通過scoped slot對級聯選擇器的備選項的節點內容進行自定義, scoped slot會傳入兩個字段node和data, 分別表示當前節點的Node對象和數據。</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: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]}} } </script>

2.11. 在components下創建PanelCascader.vue

<template><div><h1>級聯面板</h1><h4>級聯面板是級聯選擇器的核心組件, 與級聯選擇器一樣, 有單選、多選、動態加載等多種功能。和級聯選擇器一樣, 通過options來指定選項, 也可通過props來設置多選、動態加載等功能, 具體詳情見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: '設計原則',children: [{value: 'yizhi',label: '一致'}, {value: 'fankui',label: '反饋'}, {value: 'xiaolv',label: '效率'}, {value: 'kekong',label: '可控'}]}, {value: 'daohang',label: '導航',children: [{value: 'cexiangdaohang',label: '側向導航'}, {value: 'dingbudaohang',label: '頂部導航'}]}]}, {value: 'ziyuan',label: '資源',children: [{value: 'axure',label: 'Axure Components'}, {value: 'sketch',label: 'Sketch Templates'}, {value: 'jiaohu',label: '組件交互文檔'}]}]}} } </script>

2.12. 運行項目, 訪問http://localhost:8080/#/Cascader

2.13. 運行項目, 訪問http://localhost:8080/#/DisabledCascader

2.14. 運行項目, 訪問http://localhost:8080/#/ClearableCascader?

2.15. 運行項目, 訪問http://localhost:8080/#/MultipleCascader

2.16. 運行項目, 訪問http://localhost:8080/#/CheckStrictlyCascader?

2.17. 運行項目, 訪問http://localhost:8080/#/LazyCascader?

2.18. 運行項目, 訪問http://localhost:8080/#/SearchCascader?

2.19. 運行項目, 訪問http://localhost:8080/#/ScopedCascader?

?2.20. 運行項目, 訪問http://localhost:8080/#/PanelCascader

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。