a-tree-select 在 a-form 中不生效

项目中使用Ant Design of Vue

界面需求是这样的

1652844070(1).png

问题来了，点击之后输入框中没有数据。研究良久，最总发现是数据格式问题，如果想点击之后生效，select-tree的数据要有title, value这个字段。

使用replaceFields

<a-form :form="form" :colon="true" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="所属组织">
        <a-tree-select
          tree-data-simple-mode
          :tree-data="treeData"
          :load-data="onLoadData"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :replace-fields="replaceFields" // *这里修改
          v-decorator="[
            'dept',
            { 
              rules: [{ required: true, message: '请选择所属组织' }], 
            },
          ]"
          placeholder="请选择所属组织"
        >
        </a-tree-select>
      </a-form-item>
      
    </a-form>
--------------------------------------------
data() {
    return {
      replaceFields: { children: 'children', title: 'name', key: 'id', value: 'id' },   // 要有title和value这个字段
    };
  },