Ant Design Vue Cascader 省市区 fieldNames 自定义字段名称
Cascader 联级菜单有默认的树形结构，但是实践业务中树形字段的名称往往和Ant Design定义的名称不一样，这时我们可以使用fieldNames属性按自己业务来自定义数据源字段。
fieldNames默认树形字段
//以下是官方的树形结构，我们可以看出 lable是标题 children是当前节点的下级
options: [
{
value: 'zhejiang',
label: '浙江',
children: [
{
value: 'hangzhou',
label: '杭州',
children: [
{
value: 'gdl',
label: '古墩路',
},
],
},
],
},
{
value: 'js',
label: '江苏',
children: [
{
value: 'sz',
label: '苏州',
children: [
{
value: 'hss',
label: '寒山寺',
},
],
},
],
},
],fieldNames自定义树形字段
我们把 lable字段定义成title children自定义成tree
<a-cascader style="width:280px" :options="options" @change="onChange" placeholder="Please select" :fieldNames="fieldNames" />
//我们把lable字段定义成title children自定义成tree
fieldNames:{ label: 'title', value: 'value', children: 'tree' },
options: [
{
value: 'zhejiang',
title: 'Zhejiang',
tree: [
{
value: 'hangzhou',
title: 'Hangzhou',
tree: [
{
value: 'xihu',
title: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
title: 'Jiangsu',
tree: [
{
value: 'nanjing',
title: 'Nanjing',
tree: [
{
value: 'zhonghuamen',
title: 'Zhong Hua Men',
},
],
},
],
},
]
