ant-design关于表单数据重加载

想实现这样一个功能 表单里,选完公司后根据选取公司查询公司的部门,然后将让部门的下拉框出现部门数据,我应该怎么样才能让查询出来的集合加载到部门的那个下拉框的里面 a-select-option这个里边让他能够显示

v-for循环呀

在选择公司的onchange事件回调中查询公司部门数组,获取到部门列表后,使用v-for在部门下拉框中展示options,在这个过程中为了避免选择完公司后请求部门数据有网络延迟,可以在请求过程中,将部门下拉列表展示为“加载中...”的<Spin>

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这篇博客: Ant design vue中的a-select在动态给option赋值之后,placeholder失效中的 一、问题描述 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    最近做一个项目,用到了a-select,placeholder出现了问题

    先看一下不起作用的代码

    			<a-col :md="8" :sm="24">
                  <a-form-item label="学院" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15, offset: 1 }">
                    <a-select
                      style="width: 100%"
                      :allowClear="true"
                      placeholder="请选择学院"
                      v-model="receiveAcademy"
                    >
                      <a-select-option v-for="item in allCollege" :key="item">{{item}}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
    

    data里定义的变量

     data () {
        return {
       	  allCollege: [], // 保存请求到的所有学院
          receiveAcademy: '', // 保存选择的学院
        };
      },
    
     methods: {
        //获取所有学院
        getALLCollege () {
          getALLCollege().then(res => {
            this.allCollege = []
            this.allCollege = res.data.data.rows
          })
        },
      },
    

    这样一看代码,没任何问题,但是placeholder就是不起作用了

  • 以下回答来自chatgpt:

    可以通过监听公司下拉框的change事件,在change事件触发时发出查询请求获取该公司的部门信息,并将部门信息赋值给部门下拉框的选项。具体实现步骤如下:

    1.在公司下拉框(a-select)上添加change事件监听,监听函数为companyChange;

    2.在companyChange函数中获取选中公司的id(或其他标识符),并发送异步请求获取该公司的部门信息,代码示例:

    companyChange(value) {
      const companyId = value; // 获取选中的公司id,或根据value的结构获取其他标识符
      axios.get(`/api/departments?companyId=${companyId}`)
        .then(res => {
          const data = res.data;
          // 将部门信息赋值给部门下拉框的选项
          this.departments = data.departments;
        })
        .catch(err => {
          console.error(err);
        });
    }
    

    3.在部门下拉框(a-select)中使用a-select-option渲染部门信息,具体代码如下:

    <a-select v-model="selectedDepartment">
      <a-select-option v-for="department in departments" :key="department.id" :value="department.id">{{ department.name }}</a-select-option>
    </a-select>
    

    其中,selectedDepartment变量用于绑定部门下拉框的选中值,departments变量保存从后端获取到的部门信息。在a-select-option组件上设置key属性可以优化性能,同时设置value属性可以更方便地获取选中值。需要注意的是,如果部门信息的渲染需要使用异步获取的数据,需要保证部门下拉框的选项组件(a-select-option)的渲染时机晚于获取数据的异步请求的返回时机。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^