Ant Design Vue教程

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

在线试一试

Catalog
快速入门 Dropdown 下拉菜单 Menu 导航菜单 Pagination 分页 Steps 步骤条 AutoComplete 自动填充 Cascader 级联选择 Cascader 基础用法 Cascader 搜索筛选 Cascader ajax服务器端加载 Cascader 样式及自定义图标 Cascader fieldNames 自定义字段 Cascader API属性及事件 Checkbox 多选框 DatePicker 日期选择框 Input 输入框 InputNumber 数字输入框 Mentions 提及 Radio 单选框 Rate 评分组件 Select 下拉框 Slider 滑动输入条 Switch 开关