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',
                  },
                ],
              },
            ],
          },
        ]

在线试一试