mirror of https://github.com/ElemeFE/element
add cascader en docs
baiyaaaaa
parent
5c01a65423
commit
7024daab3f
|
|
@ -1 +1,487 @@
|
|||
## cascader
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
}],
|
||||
}, {
|
||||
value: 'ningbo',
|
||||
label: 'NingBo',
|
||||
children: [{
|
||||
value: 'jiangbei',
|
||||
label: 'Jiang Bei',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
}],
|
||||
}],
|
||||
}],
|
||||
optionsWithDisabled: [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
disabled: true,
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
}],
|
||||
}, {
|
||||
value: 'ningbo',
|
||||
label: 'NingBo',
|
||||
children: [{
|
||||
value: 'jiangbei',
|
||||
label: 'Jiang Bei',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
}],
|
||||
}],
|
||||
}],
|
||||
selectedOptions: [],
|
||||
selectedOptions2: ['jiangsu', 'nanjing', 'zhonghuamen']
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-cascader {
|
||||
.el-cascader {
|
||||
width: 222px;
|
||||
}
|
||||
}
|
||||
.demo-cascader-size {
|
||||
.el-cascader {
|
||||
vertical-align: top;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Cascader
|
||||
|
||||
It's used to select from a set of associated data set. Such as province/city/district, company level, and categories.
|
||||
|
||||
### Basic usage
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-cascader
|
||||
placeholder="Please select"
|
||||
:options="options"
|
||||
v-model="selectedOptions"
|
||||
@change="handleChange"
|
||||
></el-cascader>
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
}],
|
||||
}, {
|
||||
value: 'ningbo',
|
||||
label: 'NingBo',
|
||||
children: [{
|
||||
value: 'jiangbei',
|
||||
label: 'Jiang Bei',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
}],
|
||||
}],
|
||||
}],
|
||||
selectedOptions: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Disabled option
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-cascader
|
||||
placeholder="Please select"
|
||||
:options="optionsWithDisabled"
|
||||
></el-cascader>
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
optionsWithDisabled: [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
disabled: true,
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
}],
|
||||
}, {
|
||||
value: 'ningbo',
|
||||
label: 'NingBo',
|
||||
children: [{
|
||||
value: 'jiangbei',
|
||||
label: 'Jiang Bei',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
}],
|
||||
}],
|
||||
}]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Default Value
|
||||
|
||||
:::demo default value is assigned by an array type value.
|
||||
```html
|
||||
<el-cascader
|
||||
placeholder="Please select"
|
||||
:options="options"
|
||||
v-model="selectedOptions2"
|
||||
></el-cascader>
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
}],
|
||||
}, {
|
||||
value: 'ningbo',
|
||||
label: 'NingBo',
|
||||
children: [{
|
||||
value: 'jiangbei',
|
||||
label: 'Jiang Bei',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
}],
|
||||
}],
|
||||
}],
|
||||
selectedOptions2: ['jiangsu', 'nanjing', 'zhonghuamen']
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Size
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="demo-cascader-size">
|
||||
<el-cascader
|
||||
placeholder="Please select"
|
||||
:options="options"
|
||||
size="large"
|
||||
></el-cascader>
|
||||
<el-cascader
|
||||
placeholder="Please select"
|
||||
:options="options"
|
||||
></el-cascader>
|
||||
<el-cascader
|
||||
placeholder="Please select"
|
||||
:options="options"
|
||||
size="small"
|
||||
></el-cascader>
|
||||
</div>
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
}],
|
||||
}, {
|
||||
value: 'ningbo',
|
||||
label: 'NingBo',
|
||||
children: [{
|
||||
value: 'jiangbei',
|
||||
label: 'Jiang Bei',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
}],
|
||||
}],
|
||||
}]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Hover to expand
|
||||
|
||||
Hover to expand the next level options, click to select option.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-cascader
|
||||
placeholder="Please select"
|
||||
:options="options"
|
||||
expand-trigger="hover"
|
||||
></el-cascader>
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
}],
|
||||
}, {
|
||||
value: 'ningbo',
|
||||
label: 'NingBo',
|
||||
children: [{
|
||||
value: 'jiangbei',
|
||||
label: 'Jiang Bei',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
}],
|
||||
}],
|
||||
}]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Change on select
|
||||
|
||||
Allow only select parent options.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-cascader
|
||||
placeholder="Please select"
|
||||
:options="options"
|
||||
change-on-select
|
||||
></el-cascader>
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
}],
|
||||
}, {
|
||||
value: 'ningbo',
|
||||
label: 'NingBo',
|
||||
children: [{
|
||||
value: 'jiangbei',
|
||||
label: 'Jiang Bei',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
}],
|
||||
}],
|
||||
}]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Search
|
||||
|
||||
Search and select options directly.
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<el-cascader
|
||||
placeholder="Please select"
|
||||
:options="options"
|
||||
show-search
|
||||
></el-cascader>
|
||||
<script>
|
||||
module.exports = {
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
}],
|
||||
}, {
|
||||
value: 'ningbo',
|
||||
label: 'NingBo',
|
||||
children: [{
|
||||
value: 'jiangbei',
|
||||
label: 'Jiang Bei',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
}],
|
||||
}],
|
||||
}]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Options | Default|
|
||||
|---------- |-------------------- |---------|------------- |-------- |
|
||||
| options | data source of the options | array | — | — |
|
||||
| value | selected value | array | — | — |
|
||||
| popup-class | className of popup overlay | string | — | — |
|
||||
| placeholder | input placeholder | string | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| allowClear | whether allow clear | boolean | — | false |
|
||||
| expand-trigger | trigger mode of expandind the current item | string | click / hover | 'click' |
|
||||
| showSearch | whether the options can be searched | boolean | — | — |
|
||||
| size | size | string | large / small / mini | — |
|
||||
|
||||
### Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| change | triggers when the binding value changes | value |
|
||||
|
|
@ -152,7 +152,9 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 禁用值
|
||||
### 禁用选项
|
||||
|
||||
通过在数据源中设置 `disabled` 字段来声明该选项时禁用的
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
|
|
|||
|
|
@ -76,6 +76,10 @@
|
|||
"path": "/select",
|
||||
"title": "Select 选择器"
|
||||
},
|
||||
{
|
||||
"path": "/cascader",
|
||||
"title": "Cascader 级联选择"
|
||||
},
|
||||
{
|
||||
"path": "/switch",
|
||||
"title": "Switch 开关"
|
||||
|
|
@ -215,10 +219,6 @@
|
|||
{
|
||||
"path": "/collapse",
|
||||
"title": "Collapse 折叠面板"
|
||||
},
|
||||
{
|
||||
"path": "/cascader",
|
||||
"title": "Cascader 级联选择"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -302,6 +302,10 @@
|
|||
"path": "/select",
|
||||
"title": "Select"
|
||||
},
|
||||
{
|
||||
"path": "/cascader",
|
||||
"title": "Cascader"
|
||||
},
|
||||
{
|
||||
"path": "/switch",
|
||||
"title": "Switch"
|
||||
|
|
@ -441,10 +445,6 @@
|
|||
{
|
||||
"path": "/collapse",
|
||||
"title": "Collapse"
|
||||
},
|
||||
{
|
||||
"path": "/cascader",
|
||||
"title": "Cascader"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,13 @@
|
|||
<span
|
||||
class="el-cascader"
|
||||
:class="[
|
||||
{ 'is-opened': menuVisible },
|
||||
{
|
||||
'is-opened': menuVisible,
|
||||
'is-disabled': disabled
|
||||
},
|
||||
size ? 'el-cascader--' + size : ''
|
||||
]"
|
||||
@click="menuVisible = !menuVisible"
|
||||
@click="handleClick"
|
||||
@mouseenter="inputHover = true"
|
||||
@mouseleave="inputHover = false"
|
||||
ref="reference"
|
||||
|
|
@ -18,6 +21,7 @@
|
|||
@change="handleInputChange"
|
||||
:validate-event="false"
|
||||
:size="size"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<template slot="icon">
|
||||
<i
|
||||
|
|
@ -209,6 +213,11 @@ export default {
|
|||
},
|
||||
handleClickoutside() {
|
||||
this.menuVisible = false;
|
||||
},
|
||||
handleClick() {
|
||||
if (!this.disabled) {
|
||||
this.menuVisible = !this.menuVisible;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue