下拉回显问题vue3

小陈同学，，

已于 2022-08-22 15:35:56 修改

阅读量1.5k

点赞数

分类专栏： vue3.0 文章标签：前端 vue.js

于 2022-08-21 15:04:50 首次发布

本文链接：https://blog.csdn.net/ping_lvy/article/details/126095007

版权

vue3.0 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

在Vue应用中遇到一个问题，当弹框显示时，下拉菜单的选中值未能正确回显，只显示编号而不显示名称。问题在于数据源的设置。解决方案是将表格和弹框的下拉选项使用不同的数据源。在点击弹框编辑时，先清空弹框的数据，然后从表格的选中值中复制业务类型到弹框的数据源，从而实现回显。

摘要由CSDN通过智能技术生成

有个问题解决了一天，赶紧记录下来

问题：弹框弹出的时候选中下拉的值要回显，但是现在只能显示编号，不能显示名称

解决：放在不同的数据源里

表格上的下拉：

  <a-form class="form_item_right" layout="inline" :model="queries">
       <a-form-item label="业务类型：" name="business_type">
         <a-select optionLabelProp='busi_type_name' :options="businessTypeList"
            :field-names="{ label: 'busi_type_name', value: 'busi_type_code' }" style="width: 230px"
             v-model:value="queries.busi_type" placeholder="请选择" @select="nodeSelect">
         </a-select>
       </a-form-item>
  </a-form>

弹出框的下拉

      <a-form-item label="业务类型：" name="business_type">
          <a-select optionLabelProp='busi_type_name' :options="businessTypeList" style="width: 230px"
              v-model:value="formState.business_type" @select="billSelect"
              :field-names="{ label: 'busi_type_name', value: 'busi_type_code' }" 
          </a-select>
      </a-form-item>

放在不同的数据源

       const businessData = reactive({
           queries: {
                busi_type: ''
            },
            formState: {
                business_type: '',
            },
      }

点击弹框：

之前放在同一个数据源formState里，先清空formState里的所有值，把表格上下拉选中的值也清空了，就没法回显了

        /** 编辑 */
        const editBusiness = (row: any) => {
            businessData.modalvisible = true;
            businessData.modalTitle = '修改单据规则设置';
            resetFormState();
            const _row = _.cloneDeep(row);
            businessData.formState = _row;
            businessData.formState.business_type = businessData.queries.busi_type
            getBillTypeList();
        };