美文网首页
a-tree-select 在 a-form 中不生效

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

作者: 时间煮鱼 | 来源:发表于2022-05-18 11:27 被阅读0次

    项目中使用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这个字段
        };
      },
    
    

    相关文章

      网友评论

          本文标题:a-tree-select 在 a-form 中不生效

          本文链接:https://www.haomeiwen.com/subject/wmfaurtx.html