获取antdesign级联选择器中选中的lable
时间: 2024-05-14 20:13:29 浏览: 10
可以通过以下步骤获取Ant Design级联选择器中选中的label:
1. 获取级联选择器的值,即选中的所有选项的key值(可以使用`onChange`事件获取);
2. 根据key值,从数据源中查找对应的label值;
3. 将所有选中的label值拼接起来,用逗号隔开即可。
示例代码如下:
```javascript
import { Cascader } from 'antd';
const options = [
{
value: 'zhejiang',
label: '浙江',
children: [
{
value: 'hangzhou',
label: '杭州',
children: [
{
value: 'xihu',
label: '西湖',
},
],
},
],
},
];
function onChange(value, selectedOptions) {
const labels = selectedOptions.map((option) => option.label).join(', ');
console.log('Selected labels:', labels);
}
function App() {
return (
<Cascader options={options} onChange={onChange} placeholder="请选择" />
);
}
```
当选中西湖时,控制台将输出`Selected labels: 浙江, 杭州, 西湖`。