Ant Design Cascader 交互场景
何时使用
- 需要从一组相关联的数据集合进行选择,例如省市区,公司层级,事物分类等。
- 从一个较大的数据集合中进行选择时,用多级分类进行分隔,方便选择。
- 比起 Select 组件,可以在同一个浮层中完成选择,有较好的体验。
业务场景
提交选择器子选项,多选场景下用约定分割符分割,以字符串形式提交到后端,编辑时回显数据。
如何展示子项
showCheckedStrategy={Cascader.SHOW_CHILD}
<Cascader
multiple
options={option}
placeholder="请选择省市"
showCheckedStrategy={Cascader.SHOW_CHILD}
/>
前后端交互
const onFinish = (values) => {
// 需要提交的数据格式(约定为字符串,多个用','分割)
const area = _.isNil(values?.area)
? values?.area
: values?.area.map(([parent, child]) => child).join(",");
console.log(typeof area, area, "提交到后端数据");
};
编辑时回显
提交数据时去掉了父级选项,回显时需要找回每个子元素的父级。
// 假设获取到后端数据
const data = { area: "chengdu,mianyang" };
const getData = (value: string): string[] =>
option
.map((parent) =>
parent.children.map((child) => [parent.value, child.value])
)
.flat()
.find((it) => _.last(it) === value);
const displayData = data?.area
.split(",")
.map((item: string) => getData(item));
form.setFieldsValue({
area: displayData
});
console.log(displayData, "处理好的回显数据赋值给Form.Item回显");
完整代码
import React from "react";
import _ from "lodash";
import { Cascader, Form, Button } from "antd";
import "antd/dist/antd.css";
import "./index.css";
const CascaderComponent: React.FC = () => {
const [form] = Form.useForm();
const option = [
{
label: "四川",
value: "siChuan",
children: [
{
label: "成都",
value: "chengdu"
},
{
label: "绵阳",
value: "mianyang"
},
{
label: "德阳",
value: "deyang"
},
{
label: "眉山",
value: "meishan"
}
]
},
{
label: "浙江省",
value: "zhejiang",
children: [
{
label: "杭州",
value: "hangzhou"
}
]
}
];
// 如何回显数据
const data = { area: "chengdu,mianyang" };
form.setFieldsValue({
area: data.area
});
const getData = (value: string): string[] =>
option
.map((parent) =>
parent.children.map((child) => [parent.value, child.value])
)
.flat()
.find((it) => _.last(it) === value);
const displayData = data?.area
.split(",")
.map((item: string) => getData(item));
form.setFieldsValue({
area: displayData
});
console.log(displayData, "处理好的回显数据赋值给Form.Item回显");
const onFinish = (values) => {
// 需要提交的数据格式(约定为字符串,多个用','分割)
const area = _.isNil(values?.area)
? values?.area
: values?.area.map(([parent, child]) => child).join(",");
console.log(typeof area, area, "提交到后端数据");
};
return (
<Form form={form} onFinish={onFinish} layout="vertical">
<Form.Item
label="省市"
name="area"
initialValue={[["siChuan", "chengdu"]]}
>
<Cascader
multiple
options={option}
placeholder="请选择省市"
showCheckedStrategy={Cascader.SHOW_CHILD}
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default CascaderComponent;
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgghfjk
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13