免費AI編程助手
ElementPlus Cascader 級聯(lián)選擇器
2021-09-07 16:57 更新
Cascader 級聯(lián)選擇器
當一個數(shù)據(jù)集合有清晰的層級結(jié)構(gòu)時，可通過級聯(lián)選擇器逐級查看并選擇。
基礎(chǔ)用法
有兩種觸發(fā)子菜單的方式
只需為 Cascader 的options屬性指定選項數(shù)組即可渲染出一個級聯(lián)選擇器。通過props.expandTrigger可以定義展開子級菜單的觸發(fā)方式。
<template>
<div class="block">
<span class="demonstration">默認 click 觸發(fā)子菜單</span>
<el-cascader
v-model="value"
:options="options"
@change="handleChange"
></el-cascader>
</div>
<div class="block">
<span class="demonstration">hover 觸發(fā)子菜單</span>
<el-cascader
v-model="value"
:options="options"
:props="props"
@change="handleChange"
></el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
value: [],
props: { expandTrigger: 'hover' },
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ū)Ш?,
},
{
value: 'dingbudaohang',
label: '頂部導(dǎo)航',
},
],
},
],
},
{
value: 'zujian',
label: '組件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout 布局',
},
{
value: 'color',
label: 'Color 色彩',
},
{
value: 'typography',
label: 'Typography 字體',
},
{
value: 'icon',
label: 'Icon 圖標',
},
{
value: 'button',
label: 'Button 按鈕',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio 單選框',
},
{
value: 'checkbox',
label: 'Checkbox 多選框',
},
{
value: 'input',
label: 'Input 輸入框',
},
{
value: 'input-number',
label: 'InputNumber 計數(shù)器',
},
{
value: 'select',
label: 'Select 選擇器',
},
{
value: 'cascader',
label: 'Cascader 級聯(lián)選擇器',
},
{
value: 'switch',
label: 'Switch 開關(guān)',
},
{
value: 'slider',
label: 'Slider 滑塊',
},
{
value: 'time-picker',
label: 'TimePicker 時間選擇器',
},
{
value: 'date-picker',
label: 'DatePicker 日期選擇器',
},
{
value: 'datetime-picker',
label: 'DateTimePicker 日期時間選擇器',
},
{
value: 'upload',
label: 'Upload 上傳',
},
{
value: 'rate',
label: 'Rate 評分',
},
{
value: 'form',
label: 'Form 表單',
},
],
},
{
value: 'data',
label: 'Data',
children: [
{
value: 'table',
label: 'Table 表格',
},
{
value: 'tag',
label: 'Tag 標簽',
},
{
value: 'progress',
label: 'Progress 進度條',
},
{
value: 'tree',
label: 'Tree 樹形控件',
},
{
value: 'pagination',
label: 'Pagination 分頁',
},
{
value: 'badge',
label: 'Badge 標記',
},
],
},
{
value: 'notice',
label: 'Notice',
children: [
{
value: 'alert',
label: 'Alert 警告',
},
{
value: 'loading',
label: 'Loading 加載',
},
{
value: 'message',
label: 'Message 消息提示',
},
{
value: 'message-box',
label: 'MessageBox 彈框',
},
{
value: 'notification',
label: 'Notification 通知',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'menu',
label: 'NavMenu 導(dǎo)航菜單',
},
{
value: 'tabs',
label: 'Tabs 標簽頁',
},
{
value: 'breadcrumb',
label: 'Breadcrumb 面包屑',
},
{
value: 'dropdown',
label: 'Dropdown 下拉菜單',
},
{
value: 'steps',
label: 'Steps 步驟條',
},
],
},
{
value: 'others',
label: 'Others',
children: [
{
value: 'dialog',
label: 'Dialog 對話框',
},
{
value: 'tooltip',
label: 'Tooltip 文字提示',
},
{
value: 'popover',
label: 'Popover 彈出框',
},
{
value: 'card',
label: 'Card 卡片',
},
{
value: 'carousel',
label: 'Carousel 走馬燈',
},
{
value: 'collapse',
label: 'Collapse 折疊面板',
},
],
},
],
},
{
value: 'ziyuan',
label: '資源',
children: [
{
value: 'axure',
label: 'Axure Components',
},
{
value: 'sketch',
label: 'Sketch Templates',
},
{
value: 'jiaohu',
label: '組件交互文檔',
},
],
},
],
}
},
methods: {
handleChange(value) {
console.log(value)
},
},
}
</script>
禁用選項
通過在數(shù)據(jù)源中設(shè)置 disabled 字段來聲明該選項是禁用的
本例中，options指定的數(shù)組中的第一個元素含有disabled: true鍵值對，因此是禁用的。在默認情況下，Cascader 會檢查數(shù)據(jù)中每一項的disabled字段是否為true，如果你的數(shù)據(jù)中表示禁用含義的字段名不為disabled，可以通過props.disabled屬性來指定（詳見下方 API 表格）。當然，value、label和children這三個字段名也可以通過同樣的方式指定。
<template>
<el-cascader :options="options"></el-cascader>
</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ū)Ш?,
},
{
value: 'dingbudaohang',
label: '頂部導(dǎo)航',
},
],
},
],
},
{
value: 'zujian',
label: '組件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout 布局',
},
{
value: 'color',
label: 'Color 色彩',
},
{
value: 'typography',
label: 'Typography 字體',
},
{
value: 'icon',
label: 'Icon 圖標',
},
{
value: 'button',
label: 'Button 按鈕',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio 單選框',
},
{
value: 'checkbox',
label: 'Checkbox 多選框',
},
{
value: 'input',
label: 'Input 輸入框',
},
{
value: 'input-number',
label: 'InputNumber 計數(shù)器',
},
{
value: 'select',
label: 'Select 選擇器',
},
{
value: 'cascader',
label: 'Cascader 級聯(lián)選擇器',
},
{
value: 'switch',
label: 'Switch 開關(guān)',
},
{
value: 'slider',
label: 'Slider 滑塊',
},
{
value: 'time-picker',
label: 'TimePicker 時間選擇器',
},
{
value: 'date-picker',
label: 'DatePicker 日期選擇器',
},
{
value: 'datetime-picker',
label: 'DateTimePicker 日期時間選擇器',
},
{
value: 'upload',
label: 'Upload 上傳',
},
{
value: 'rate',
label: 'Rate 評分',
},
{
value: 'form',
label: 'Form 表單',
},
],
},
{
value: 'data',
label: 'Data',
children: [
{
value: 'table',
label: 'Table 表格',
},
{
value: 'tag',
label: 'Tag 標簽',
},
{
value: 'progress',
label: 'Progress 進度條',
},
{
value: 'tree',
label: 'Tree 樹形控件',
},
{
value: 'pagination',
label: 'Pagination 分頁',
},
{
value: 'badge',
label: 'Badge 標記',
},
],
},
{
value: 'notice',
label: 'Notice',
children: [
{
value: 'alert',
label: 'Alert 警告',
},
{
value: 'loading',
label: 'Loading 加載',
},
{
value: 'message',
label: 'Message 消息提示',
},
{
value: 'message-box',
label: 'MessageBox 彈框',
},
{
value: 'notification',
label: 'Notification 通知',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'menu',
label: 'NavMenu 導(dǎo)航菜單',
},
{
value: 'tabs',
label: 'Tabs 標簽頁',
},
{
value: 'breadcrumb',
label: 'Breadcrumb 面包屑',
},
{
value: 'dropdown',
label: 'Dropdown 下拉菜單',
},
{
value: 'steps',
label: 'Steps 步驟條',
},
],
},
{
value: 'others',
label: 'Others',
children: [
{
value: 'dialog',
label: 'Dialog 對話框',
},
{
value: 'tooltip',
label: 'Tooltip 文字提示',
},
{
value: 'popover',
label: 'Popover 彈出框',
},
{
value: 'card',
label: 'Card 卡片',
},
{
value: 'carousel',
label: 'Carousel 走馬燈',
},
{
value: 'collapse',
label: 'Collapse 折疊面板',
},
],
},
],
},
{
value: 'ziyuan',
label: '資源',
children: [
{
value: 'axure',
label: 'Axure Components',
},
{
value: 'sketch',
label: 'Sketch Templates',
},
{
value: 'jiaohu',
label: '組件交互文檔',
},
],
},
],
}
},
}
</script>可清空
通過 clearable 設(shè)置輸入框可清空
<template>
<el-cascader :options="options" clearable></el-cascader>
</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ū)Ш?,
},
{
value: 'dingbudaohang',
label: '頂部導(dǎo)航',
},
],
},
],
},
{
value: 'zujian',
label: '組件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout 布局',
},
{
value: 'color',
label: 'Color 色彩',
},
{
value: 'typography',
label: 'Typography 字體',
},
{
value: 'icon',
label: 'Icon 圖標',
},
{
value: 'button',
label: 'Button 按鈕',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio 單選框',
},
{
value: 'checkbox',
label: 'Checkbox 多選框',
},
{
value: 'input',
label: 'Input 輸入框',
},
{
value: 'input-number',
label: 'InputNumber 計數(shù)器',
},
{
value: 'select',
label: 'Select 選擇器',
},
{
value: 'cascader',
label: 'Cascader 級聯(lián)選擇器',
},
{
value: 'switch',
label: 'Switch 開關(guān)',
},
{
value: 'slider',
label: 'Slider 滑塊',
},
{
value: 'time-picker',
label: 'TimePicker 時間選擇器',
},
{
value: 'date-picker',
label: 'DatePicker 日期選擇器',
},
{
value: 'datetime-picker',
label: 'DateTimePicker 日期時間選擇器',
},
{
value: 'upload',
label: 'Upload 上傳',
},
{
value: 'rate',
label: 'Rate 評分',
},
{
value: 'form',
label: 'Form 表單',
},
],
},
{
value: 'data',
label: 'Data',
children: [
{
value: 'table',
label: 'Table 表格',
},
{
value: 'tag',
label: 'Tag 標簽',
},
{
value: 'progress',
label: 'Progress 進度條',
},
{
value: 'tree',
label: 'Tree 樹形控件',
},
{
value: 'pagination',
label: 'Pagination 分頁',
},
{
value: 'badge',
label: 'Badge 標記',
},
],
},
{
value: 'notice',
label: 'Notice',
children: [
{
value: 'alert',
label: 'Alert 警告',
},
{
value: 'loading',
label: 'Loading 加載',
},
{
value: 'message',
label: 'Message 消息提示',
},
{
value: 'message-box',
label: 'MessageBox 彈框',
},
{
value: 'notification',
label: 'Notification 通知',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'menu',
label: 'NavMenu 導(dǎo)航菜單',
},
{
value: 'tabs',
label: 'Tabs 標簽頁',
},
{
value: 'breadcrumb',
label: 'Breadcrumb 面包屑',
},
{
value: 'dropdown',
label: 'Dropdown 下拉菜單',
},
{
value: 'steps',
label: 'Steps 步驟條',
},
],
},
{
value: 'others',
label: 'Others',
children: [
{
value: 'dialog',
label: 'Dialog 對話框',
},
{
value: 'tooltip',
label: 'Tooltip 文字提示',
},
{
value: 'popover',
label: 'Popover 彈出框',
},
{
value: 'card',
label: 'Card 卡片',
},
{
value: 'carousel',
label: 'Carousel 走馬燈',
},
{
value: 'collapse',
label: 'Collapse 折疊面板',
},
],
},
],
},
{
value: 'ziyuan',
label: '資源',
children: [
{
value: 'axure',
label: 'Axure Components',
},
{
value: 'sketch',
label: 'Sketch Templates',
},
{
value: 'jiaohu',
label: '組件交互文檔',
},
],
},
],
}
},
}
</script>
僅顯示最后一級
可以僅在輸入框中顯示選中項最后一級的標簽，而不是選中項所在的完整路徑。
屬性show-all-levels定義了是否顯示完整的路徑，將其賦值為false則僅顯示最后一級
<template>
<el-cascader :options="options" :show-all-levels="false"></el-cascader>
</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ū)Ш?,
},
{
value: 'dingbudaohang',
label: '頂部導(dǎo)航',
},
],
},
],
},
{
value: 'zujian',
label: '組件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout 布局',
},
{
value: 'color',
label: 'Color 色彩',
},
{
value: 'typography',
label: 'Typography 字體',
},
{
value: 'icon',
label: 'Icon 圖標',
},
{
value: 'button',
label: 'Button 按鈕',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio 單選框',
},
{
value: 'checkbox',
label: 'Checkbox 多選框',
},
{
value: 'input',
label: 'Input 輸入框',
},
{
value: 'input-number',
label: 'InputNumber 計數(shù)器',
},
{
value: 'select',
label: 'Select 選擇器',
},
{
value: 'cascader',
label: 'Cascader 級聯(lián)選擇器',
},
{
value: 'switch',
label: 'Switch 開關(guān)',
},
{
value: 'slider',
label: 'Slider 滑塊',
},
{
value: 'time-picker',
label: 'TimePicker 時間選擇器',
},
{
value: 'date-picker',
label: 'DatePicker 日期選擇器',
},
{
value: 'datetime-picker',
label: 'DateTimePicker 日期時間選擇器',
},
{
value: 'upload',
label: 'Upload 上傳',
},
{
value: 'rate',
label: 'Rate 評分',
},
{
value: 'form',
label: 'Form 表單',
},
],
},
{
value: 'data',
label: 'Data',
children: [
{
value: 'table',
label: 'Table 表格',
},
{
value: 'tag',
label: 'Tag 標簽',
},
{
value: 'progress',
label: 'Progress 進度條',
},
{
value: 'tree',
label: 'Tree 樹形控件',
},
{
value: 'pagination',
label: 'Pagination 分頁',
},
{
value: 'badge',
label: 'Badge 標記',
},
],
},
{
value: 'notice',
label: 'Notice',
children: [
{
value: 'alert',
label: 'Alert 警告',
},
{
value: 'loading',
label: 'Loading 加載',
},
{
value: 'message',
label: 'Message 消息提示',
},
{
value: 'message-box',
label: 'MessageBox 彈框',
},
{
value: 'notification',
label: 'Notification 通知',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'menu',
label: 'NavMenu 導(dǎo)航菜單',
},
{
value: 'tabs',
label: 'Tabs 標簽頁',
},
{
value: 'breadcrumb',
label: 'Breadcrumb 面包屑',
},
{
value: 'dropdown',
label: 'Dropdown 下拉菜單',
},
{
value: 'steps',
label: 'Steps 步驟條',
},
],
},
{
value: 'others',
label: 'Others',
children: [
{
value: 'dialog',
label: 'Dialog 對話框',
},
{
value: 'tooltip',
label: 'Tooltip 文字提示',
},
{
value: 'popover',
label: 'Popover 彈出框',
},
{
value: 'card',
label: 'Card 卡片',
},
{
value: 'carousel',
label: 'Carousel 走馬燈',
},
{
value: 'collapse',
label: 'Collapse 折疊面板',
},
],
},
],
},
{
value: 'ziyuan',
label: '資源',
children: [
{
value: 'axure',
label: 'Axure Components',
},
{
value: 'sketch',
label: 'Sketch Templates',
},
{
value: 'jiaohu',
label: '組件交互文檔',
},
],
},
],
}
},
}
</script>
多選
可通過 props.multiple = true 來開啟多選模式
在開啟多選模式后，默認情況下會展示所有已選中的選項的 Tag，你可以使用collapse-tags來折疊 Tag
<template>
<div class="block">
<span class="demonstration">默認顯示所有Tag</span>
<el-cascader :options="options" :props="props" clearable></el-cascader>
</div>
<div class="block">
<span class="demonstration">折疊展示Tag</span>
<el-cascader
:options="options"
:props="props"
collapse-tags
clearable
></el-cascader>
</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>
選擇任意一級選項
在單選模式下，你只能選擇葉子節(jié)點；而在多選模式下，勾選父節(jié)點真正選中的都是葉子節(jié)點。啟用該功能后，可讓父子節(jié)點取消關(guān)聯(lián)，選擇任意一級選項。
可通過 props.checkStrictly = true 來設(shè)置父子節(jié)點取消選中關(guān)聯(lián)，從而達到選擇任意一級選項的目的。
<template>
<div class="block">
<span class="demonstration">單選選擇任意一級選項</span>
<el-cascader
:options="options"
:props="{ checkStrictly: true }"
clearable
></el-cascader>
</div>
<div class="block">
<span class="demonstration">多選選擇任意一級選項</span>
<el-cascader
:options="options"
:props="{ multiple: true, checkStrictly: true }"
clearable
></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ū)Ш?,
},
{
value: 'dingbudaohang',
label: '頂部導(dǎo)航',
},
],
},
],
},
{
value: 'zujian',
label: '組件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout 布局',
},
{
value: 'color',
label: 'Color 色彩',
},
{
value: 'typography',
label: 'Typography 字體',
},
{
value: 'icon',
label: 'Icon 圖標',
},
{
value: 'button',
label: 'Button 按鈕',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio 單選框',
},
{
value: 'checkbox',
label: 'Checkbox 多選框',
},
{
value: 'input',
label: 'Input 輸入框',
},
{
value: 'input-number',
label: 'InputNumber 計數(shù)器',
},
{
value: 'select',
label: 'Select 選擇器',
},
{
value: 'cascader',
label: 'Cascader 級聯(lián)選擇器',
},
{
value: 'switch',
label: 'Switch 開關(guān)',
},
{
value: 'slider',
label: 'Slider 滑塊',
},
{
value: 'time-picker',
label: 'TimePicker 時間選擇器',
},
{
value: 'date-picker',
label: 'DatePicker 日期選擇器',
},
{
value: 'datetime-picker',
label: 'DateTimePicker 日期時間選擇器',
},
{
value: 'upload',
label: 'Upload 上傳',
},
{
value: 'rate',
label: 'Rate 評分',
},
{
value: 'form',
label: 'Form 表單',
},
],
},
{
value: 'data',
label: 'Data',
children: [
{
value: 'table',
label: 'Table 表格',
},
{
value: 'tag',
label: 'Tag 標簽',
},
{
value: 'progress',
label: 'Progress 進度條',
},
{
value: 'tree',
label: 'Tree 樹形控件',
},
{
value: 'pagination',
label: 'Pagination 分頁',
},
{
value: 'badge',
label: 'Badge 標記',
},
],
},
{
value: 'notice',
label: 'Notice',
children: [
{
value: 'alert',
label: 'Alert 警告',
},
{
value: 'loading',
label: 'Loading 加載',
},
{
value: 'message',
label: 'Message 消息提示',
},
{
value: 'message-box',
label: 'MessageBox 彈框',
},
{
value: 'notification',
label: 'Notification 通知',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'menu',
label: 'NavMenu 導(dǎo)航菜單',
},
{
value: 'tabs',
label: 'Tabs 標簽頁',
},
{
value: 'breadcrumb',
label: 'Breadcrumb 面包屑',
},
{
value: 'dropdown',
label: 'Dropdown 下拉菜單',
},
{
value: 'steps',
label: 'Steps 步驟條',
},
],
},
{
value: 'others',
label: 'Others',
children: [
{
value: 'dialog',
label: 'Dialog 對話框',
},
{
value: 'tooltip',
label: 'Tooltip 文字提示',
},
{
value: 'popover',
label: 'Popover 彈出框',
},
{
value: 'card',
label: 'Card 卡片',
},
{
value: 'carousel',
label: 'Carousel 走馬燈',
},
{
value: 'collapse',
label: 'Collapse 折疊面板',
},
],
},
],
},
{
value: 'ziyuan',
label: '資源',
children: [
{
value: 'axure',
label: 'Axure Components',
},
{
value: 'sketch',
label: 'Sketch Templates',
},
{
value: 'jiaohu',
label: '組件交互文檔',
},
],
},
],
}
},
}
</script>
動態(tài)加載
當選中某一級時，動態(tài)加載該級下的選項。
通過lazy開啟動態(tài)加載，并通過lazyload來設(shè)置加載數(shù)據(jù)源的方法。lazyload方法有兩個參數(shù)，第一個參數(shù)node為當前點擊的節(jié)點，第二個resolve為數(shù)據(jù)加載完成的回調(diào)(必須調(diào)用)。為了更準確的顯示節(jié)點的狀態(tài)，還可以對節(jié)點數(shù)據(jù)添加是否為葉子節(jié)點的標志位 (默認字段為leaf，可通過props.leaf修改)，否則會簡單的以有無子節(jié)點來判斷是否為葉子節(jié)點。
<template>
<el-cascader :props="props"></el-cascader>
</template>
<script>
let id = 0
export default {
data() {
return {
props: {
lazy: true,
lazyLoad(node, resolve) {
const { level } = node
setTimeout(() => {
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>
可搜索
可以快捷地搜索選項并選擇。
將filterable賦值為true即可打開搜索功能，默認會匹配節(jié)點的label或所有父節(jié)點的label(由show-all-levels決定)中包含輸入值的選項。你也可以用filter-method自定義搜索邏輯，接受一個函數(shù)，第一個參數(shù)是節(jié)點node，第二個參數(shù)是搜索關(guān)鍵詞keyword，通過返回布爾值表示是否命中。
<template>
<div class="block">
<span class="demonstration">單選可搜索</span>
<el-cascader
placeholder="試試搜索：指南"
:options="options"
filterable
></el-cascader>
</div>
<div class="block">
<span class="demonstration">多選可搜索</span>
<el-cascader
placeholder="試試搜索：指南"
:options="options"
:props="{ multiple: true }"
filterable
></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ū)Ш?,
},
{
value: 'dingbudaohang',
label: '頂部導(dǎo)航',
},
],
},
],
},
{
value: 'zujian',
label: '組件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout 布局',
},
{
value: 'color',
label: 'Color 色彩',
},
{
value: 'typography',
label: 'Typography 字體',
},
{
value: 'icon',
label: 'Icon 圖標',
},
{
value: 'button',
label: 'Button 按鈕',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio 單選框',
},
{
value: 'checkbox',
label: 'Checkbox 多選框',
},
{
value: 'input',
label: 'Input 輸入框',
},
{
value: 'input-number',
label: 'InputNumber 計數(shù)器',
},
{
value: 'select',
label: 'Select 選擇器',
},
{
value: 'cascader',
label: 'Cascader 級聯(lián)選擇器',
},
{
value: 'switch',
label: 'Switch 開關(guān)',
},
{
value: 'slider',
label: 'Slider 滑塊',
},
{
value: 'time-picker',
label: 'TimePicker 時間選擇器',
},
{
value: 'date-picker',
label: 'DatePicker 日期選擇器',
},
{
value: 'datetime-picker',
label: 'DateTimePicker 日期時間選擇器',
},
{
value: 'upload',
label: 'Upload 上傳',
},
{
value: 'rate',
label: 'Rate 評分',
},
{
value: 'form',
label: 'Form 表單',
},
],
},
{
value: 'data',
label: 'Data',
children: [
{
value: 'table',
label: 'Table 表格',
},
{
value: 'tag',
label: 'Tag 標簽',
},
{
value: 'progress',
label: 'Progress 進度條',
},
{
value: 'tree',
label: 'Tree 樹形控件',
},
{
value: 'pagination',
label: 'Pagination 分頁',
},
{
value: 'badge',
label: 'Badge 標記',
},
],
},
{
value: 'notice',
label: 'Notice',
children: [
{
value: 'alert',
label: 'Alert 警告',
},
{
value: 'loading',
label: 'Loading 加載',
},
{
value: 'message',
label: 'Message 消息提示',
},
{
value: 'message-box',
label: 'MessageBox 彈框',
},
{
value: 'notification',
label: 'Notification 通知',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'menu',
label: 'NavMenu 導(dǎo)航菜單',
},
{
value: 'tabs',
label: 'Tabs 標簽頁',
},
{
value: 'breadcrumb',
label: 'Breadcrumb 面包屑',
},
{
value: 'dropdown',
label: 'Dropdown 下拉菜單',
},
{
value: 'steps',
label: 'Steps 步驟條',
},
],
},
{
value: 'others',
label: 'Others',
children: [
{
value: 'dialog',
label: 'Dialog 對話框',
},
{
value: 'tooltip',
label: 'Tooltip 文字提示',
},
{
value: 'popover',
label: 'Popover 彈出框',
},
{
value: 'card',
label: 'Card 卡片',
},
{
value: 'carousel',
label: 'Carousel 走馬燈',
},
{
value: 'collapse',
label: 'Collapse 折疊面板',
},
],
},
],
},
{
value: 'ziyuan',
label: '資源',
children: [
{
value: 'axure',
label: 'Axure Components',
},
{
value: 'sketch',
label: 'Sketch Templates',
},
{
value: 'jiaohu',
label: '組件交互文檔',
},
],
},
],
}
},
}
</script>自定義節(jié)點內(nèi)容
可以自定義備選項的節(jié)點內(nèi)容
可以通過scoped slot對級聯(lián)選擇器的備選項的節(jié)點內(nèi)容進行自定義，scoped slot 會傳入兩個字段 node 和 data，分別表示當前節(jié)點的 Node 對象和數(shù)據(jù)。
<template>
<el-cascader :options="options">
<template #default="{ node, data }">
<span>{{ data.label }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
</template>
</el-cascader>
</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ū)Ш?,
},
{
value: 'dingbudaohang',
label: '頂部導(dǎo)航',
},
],
},
],
},
{
value: 'zujian',
label: '組件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout 布局',
},
{
value: 'color',
label: 'Color 色彩',
},
{
value: 'typography',
label: 'Typography 字體',
},
{
value: 'icon',
label: 'Icon 圖標',
},
{
value: 'button',
label: 'Button 按鈕',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio 單選框',
},
{
value: 'checkbox',
label: 'Checkbox 多選框',
},
{
value: 'input',
label: 'Input 輸入框',
},
{
value: 'input-number',
label: 'InputNumber 計數(shù)器',
},
{
value: 'select',
label: 'Select 選擇器',
},
{
value: 'cascader',
label: 'Cascader 級聯(lián)選擇器',
},
{
value: 'switch',
label: 'Switch 開關(guān)',
},
{
value: 'slider',
label: 'Slider 滑塊',
},
{
value: 'time-picker',
label: 'TimePicker 時間選擇器',
},
{
value: 'date-picker',
label: 'DatePicker 日期選擇器',
},
{
value: 'datetime-picker',
label: 'DateTimePicker 日期時間選擇器',
},
{
value: 'upload',
label: 'Upload 上傳',
},
{
value: 'rate',
label: 'Rate 評分',
},
{
value: 'form',
label: 'Form 表單',
},
],
},
{
value: 'data',
label: 'Data',
children: [
{
value: 'table',
label: 'Table 表格',
},
{
value: 'tag',
label: 'Tag 標簽',
},
{
value: 'progress',
label: 'Progress 進度條',
},
{
value: 'tree',
label: 'Tree 樹形控件',
},
{
value: 'pagination',
label: 'Pagination 分頁',
},
{
value: 'badge',
label: 'Badge 標記',
},
],
},
{
value: 'notice',
label: 'Notice',
children: [
{
value: 'alert',
label: 'Alert 警告',
},
{
value: 'loading',
label: 'Loading 加載',
},
{
value: 'message',
label: 'Message 消息提示',
},
{
value: 'message-box',
label: 'MessageBox 彈框',
},
{
value: 'notification',
label: 'Notification 通知',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'menu',
label: 'NavMenu 導(dǎo)航菜單',
},
{
value: 'tabs',
label: 'Tabs 標簽頁',
},
{
value: 'breadcrumb',
label: 'Breadcrumb 面包屑',
},
{
value: 'dropdown',
label: 'Dropdown 下拉菜單',
},
{
value: 'steps',
label: 'Steps 步驟條',
},
],
},
{
value: 'others',
label: 'Others',
children: [
{
value: 'dialog',
label: 'Dialog 對話框',
},
{
value: 'tooltip',
label: 'Tooltip 文字提示',
},
{
value: 'popover',
label: 'Popover 彈出框',
},
{
value: 'card',
label: 'Card 卡片',
},
{
value: 'carousel',
label: 'Carousel 走馬燈',
},
{
value: 'collapse',
label: 'Collapse 折疊面板',
},
],
},
],
},
{
value: 'ziyuan',
label: '資源',
children: [
{
value: 'axure',
label: 'Axure Components',
},
{
value: 'sketch',
label: 'Sketch Templates',
},
{
value: 'jiaohu',
label: '組件交互文檔',
},
],
},
],
}
},
}
</script>
級聯(lián)面板
級聯(lián)面板是級聯(lián)選擇器的核心組件，與級聯(lián)選擇器一樣，有單選、多選、動態(tài)加載等多種功能。
和級聯(lián)選擇器一樣，通過options來指定選項，也可通過props來設(shè)置多選、動態(tài)加載等功能，具體詳情見下方 API 表格。
<template>
<el-cascader-panel :options="options"></el-cascader-panel>
</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ū)Ш?,
},
{
value: 'dingbudaohang',
label: '頂部導(dǎo)航',
},
],
},
],
},
{
value: 'zujian',
label: '組件',
children: [
{
value: 'basic',
label: 'Basic',
children: [
{
value: 'layout',
label: 'Layout 布局',
},
{
value: 'color',
label: 'Color 色彩',
},
{
value: 'typography',
label: 'Typography 字體',
},
{
value: 'icon',
label: 'Icon 圖標',
},
{
value: 'button',
label: 'Button 按鈕',
},
],
},
{
value: 'form',
label: 'Form',
children: [
{
value: 'radio',
label: 'Radio 單選框',
},
{
value: 'checkbox',
label: 'Checkbox 多選框',
},
{
value: 'input',
label: 'Input 輸入框',
},
{
value: 'input-number',
label: 'InputNumber 計數(shù)器',
},
{
value: 'select',
label: 'Select 選擇器',
},
{
value: 'cascader',
label: 'Cascader 級聯(lián)選擇器',
},
{
value: 'switch',
label: 'Switch 開關(guān)',
},
{
value: 'slider',
label: 'Slider 滑塊',
},
{
value: 'time-picker',
label: 'TimePicker 時間選擇器',
},
{
value: 'date-picker',
label: 'DatePicker 日期選擇器',
},
{
value: 'datetime-picker',
label: 'DateTimePicker 日期時間選擇器',
},
{
value: 'upload',
label: 'Upload 上傳',
},
{
value: 'rate',
label: 'Rate 評分',
},
{
value: 'form',
label: 'Form 表單',
},
],
},
{
value: 'data',
label: 'Data',
children: [
{
value: 'table',
label: 'Table 表格',
},
{
value: 'tag',
label: 'Tag 標簽',
},
{
value: 'progress',
label: 'Progress 進度條',
},
{
value: 'tree',
label: 'Tree 樹形控件',
},
{
value: 'pagination',
label: 'Pagination 分頁',
},
{
value: 'badge',
label: 'Badge 標記',
},
],
},
{
value: 'notice',
label: 'Notice',
children: [
{
value: 'alert',
label: 'Alert 警告',
},
{
value: 'loading',
label: 'Loading 加載',
},
{
value: 'message',
label: 'Message 消息提示',
},
{
value: 'message-box',
label: 'MessageBox 彈框',
},
{
value: 'notification',
label: 'Notification 通知',
},
],
},
{
value: 'navigation',
label: 'Navigation',
children: [
{
value: 'menu',
label: 'NavMenu 導(dǎo)航菜單',
},
{
value: 'tabs',
label: 'Tabs 標簽頁',
},
{
value: 'breadcrumb',
label: 'Breadcrumb 面包屑',
},
{
value: 'dropdown',
label: 'Dropdown 下拉菜單',
},
{
value: 'steps',
label: 'Steps 步驟條',
},
],
},
{
value: 'others',
label: 'Others',
children: [
{
value: 'dialog',
label: 'Dialog 對話框',
},
{
value: 'tooltip',
label: 'Tooltip 文字提示',
},
{
value: 'popover',
label: 'Popover 彈出框',
},
{
value: 'card',
label: 'Card 卡片',
},
{
value: 'carousel',
label: 'Carousel 走馬燈',
},
{
value: 'collapse',
label: 'Collapse 折疊面板',
},
],
},
],
},
{
value: 'ziyuan',
label: '資源',
children: [
{
value: 'axure',
label: 'Axure Components',
},
{
value: 'sketch',
label: 'Sketch Templates',
},
{
value: 'jiaohu',
label: '組件交互文檔',
},
],
},
],
}
},
}
</script>
Cascader Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| model-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 | — | — |
| popper-append-to-body | 是否將彈出框插入至 body 元素。在彈出框的定位出現(xiàn)問題時，可將該屬性設(shè)置為 false | boolean | - | true |
Cascader Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---|---|---|
| change | 當選中節(jié)點變化時觸發(fā) | 選中節(jié)點的值 |
| expand-change | 當展開節(jié)點發(fā)生變化時觸發(fā) | 各父級選項值組成的數(shù)組 |
| blur | 當失去焦點時觸發(fā) | (event: Event) |
| focus | 當獲得焦點時觸發(fā) | (event: Event) |
| visible-change | 下拉框出現(xiàn)/隱藏時觸發(fā) | 出現(xiàn)則為 true，隱藏則為 false |
| remove-tag | 在多選模式下，移除 Tag 時觸發(fā) | 移除的 Tag 對應(yīng)的節(jié)點的值 |
Cascader Methods
| 方法名 | 說明 | 參數(shù) |
|---|---|---|
| getCheckedNodes | 獲取選中的節(jié)點 | (leafOnly) 是否只是葉子節(jié)點，默認值為 false |
Cascader Slots
| 名稱 | 說明 |
|---|---|
| - | 自定義備選項的節(jié)點內(nèi)容，參數(shù)為 { node, data }，分別為當前節(jié)點的 Node 對象和數(shù)據(jù) |
| empty | 無匹配選項時的內(nèi)容 |
CascaderPanel Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| model-value / v-model | 選中項綁定值 | - | — | — |
| options | 可選項數(shù)據(jù)源，鍵名可通過 Props 屬性配置 | array | — | — |
| props | 配置選項，具體見下表 | object | — | — |
CascaderPanel Events
| 事件名稱 | 說明 | 回調(diào)參數(shù) |
|---|---|---|
| change | 當選中節(jié)點變化時觸發(fā) | 選中節(jié)點的值 |
| expand-change | 當展開節(jié)點發(fā)生變化時觸發(fā) | 各父級選項值組成的數(shù)組 |
CascaderPanel Methods
| 方法名 | 說明 | 參數(shù) |
|---|---|---|
| getCheckedNodes | 獲取選中的節(jié)點數(shù)組 | (leafOnly) 是否只是葉子節(jié)點，默認值為 false |
| clearCheckedNodes | 清空選中的節(jié)點 | - |
CascaderPanel Slots
| 名稱 | 說明 |
|---|---|
| - | 自定義備選項的節(jié)點內(nèi)容，參數(shù)為 { node, data }，分別為當前節(jié)點的 Node 對象和數(shù)據(jù) |
Props
| 參數(shù) | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| expandTrigger | 次級菜單的展開方式 | string | click / hover | 'click' |
| multiple | 是否多選 | boolean | - | false |
| checkStrictly | 是否嚴格的遵守父子節(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為當前點擊的節(jié)點，resolve為數(shù)據(jù)加載完成的回調(diào)(必須調(diào)用) | - | - |
| value | 指定選項的值為選項對象的某個屬性值 | string | — | 'value' |
| label | 指定選項標簽為選項對象的某個屬性值 | string | — | 'label' |
| children | 指定選項的子選項為選項對象的某個屬性值 | string | — | 'children' |
| disabled | 指定選項的禁用為選項對象的某個屬性值 | string | — | 'disabled' |
| leaf | 指定選項的葉子節(jié)點的標志位為選項對象的某個屬性值 | string | — | 'leaf' |
以上內(nèi)容是否對您有幫助：
更多建議：