一、Cascader组件设置默认值
Cascader组件是一个级联选择器，可以通过设置defaultValue属性来设置默认值，当然也可以通过value属性和onChange回调函数来实现值的变更。defaultValue属性接受一个数组，表示默认选中的选项，数组的每一项对应一个级别。注意：defaultValue数组中的每一项必须是字符串类型。
import { Cascader } from 'antd';
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
];
const App = () => (
二、Cascader选择器
Cascader组件是一个可以搜索的级联选择器，可以通过showSearch属性来开启搜索功能。当我们需要使用搜索功能的时候，建议设置changeOnSelect为true，这样每一次选中选项就会立刻触发onChange回调函数。
import { Cascader } from 'antd';
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
];
function onChange(value, selectedOptions) {
console.log(value, selectedOptions);
}
const App = () => (
path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)}} changeOnSelect />
);
ReactDOM.render(
三、Cascader多选
Cascader组件可以通过设置multiple属性来启用多选功能。此时selectedOptions参数中会返回一个数组，表示所有被选中的选项。同时，调用onChange回调函数的时候，也会传入一个数组，表示所有被选中的选项的值数组。
import { Cascader } from 'antd';
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
{
value: 'lingyin',
label: 'Ling Yin Temple',
},
],
},
],
},
];
function onChange(value, selectedOptions) {
console.log(value, selectedOptions);
}
const App = () => (
path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)}} changeOnSelect multiple />
);
ReactDOM.render(
四、Cascader回显
我们可以通过设置value属性来控制Cascader的选中状态。当然，如果我们需要回显多个选项，那么就需要使用数组来设置value属性。同时，建议设置changeOnSelect为true，这样每一次选中选项就会立刻触发onChange回调函数。
import { Cascader } from 'antd';
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
{
value: 'lingyin',
label: 'Ling Yin Temple',
},
],
},
],
},
];
function onChange(value, selectedOptions) {
console.log(value, selectedOptions);
}
const App = () => (
path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)}} changeOnSelect value={['zhejiang', 'hangzhou', 'xihu']} />
);
ReactDOM.render(
五、Antd Cascader
Antd是一个非常优秀的React组件库，其中Cascader组件是其提供的一个非常好用的级联选择器，可以在网站开发和移动端APP开发中广泛使用。Antd Cascader提供了非常丰富的自定义选项，可以根据不同的业务需求来进行定制。
下方是一个使用Antd Cascader的例子，你可以在Antd官网上自行寻找更多的例子和文档。
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import { Cascader } from 'antd';
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
];
function onChange(value, selectedOptions) {
console.log(value, selectedOptions);
}
function filter(inputValue, path) {
return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
}
const App = () => (
六、Cascader默认值
Cascader组件根据defaultValue、value等属性的设置来设置默认值。这些属性的设置非常简单，只需要设置一下对应的属性值即可。同时，我们可以在options属性中设置某个选项的disabled为true，这样该选项就会被禁用，并且不能被选择。
下方是一个例子，你可以在这个例子中自行测试自己的理解。
import { Cascader } from 'antd';
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
{
value: 'ningbo',
label: 'Ningbo',
disabled: true,
children: [
{
value: 'tianyi',
label: 'Tian Yi',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
];
const App = () => (
七、Element Cascader
Element是另一个很受欢迎的Vue组件库，也提供了类似于Antd的Cascader组件。Element Cascader提供了非常丰富的自定义选项，可以根据不同的业务需求来进行定制。
下方是一个使用Element Cascader的例子，你可以在Element官网上自行寻找更多的例子和文档。
<template>
<div class="block">
<span class="demonstration">默认值：{{ cascader }}</span>
<el-cascader
v-model="cascader"
:options="options">
</el-cascader>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue';
export default defineComponent({
name: 'Demo',
setup() {
const state = reactive({
cascader: [],
options: [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake'
}
]
}
]
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men'
}
]
}
]
}
]
})
return { state }
}
})
</script>
<style scoped>
.block {
margin-bottom: 20px;
}
.demonstration {
font-size: 14px;
padding: 20px 0 10px 0;
}
</style>
八、Cascader获取选中的值
Cascader组件可以通过onChange回调函数来获取当前选中的值。onChange回调函数会在选中选项时触发，接收两个参数：选中的值（value）和选中的选项的数据（选项数组）。
import { Cascader } from 'antd';
const options = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
{
value: 'ningbo',
label: 'Ningbo',
disabled: true,
children: [
{
value: 'tianyi',
label: 'Tian Yi',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
];
function onChange(value, selectedOptions) {
console.log(value, selectedOptions);
}
const App = () => (
path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)}} changeOnSelect />
);
ReactDOM.render(
