页面提交后,el-select显示框如何显示为空?

el-select 绑定从后端获取的数据,即

 <el-form :inline="true" size="small" ref="priceForm">
            
            <el-tag effect="dark" type="success">基本参数el-tag>
            <el-row>
                <el-col :span="6" class="colBig">
                    <el-form-item label-width="110px" label="产品系列:">
                        <el-select  ref="priceFormXilie" value-key="code"  placeholder="请选择" v-model="priceModel.xilie">
                            <el-option v-for="(item,index) in xilieData" :label="item.code" :key=index :value="item">
                            el-option>
                        el-select>
                    el-form-item>
                el-col>
          <el-row>
el-form>  

注意:绑定值即priceModel.xilie是个对象

要求:选中某一个值提交后,要让el-select置空.
我的处理是在提交处理中把 this.priceModel.xilie.code="",这样导致下拉选择框中出现了一行为空.

请问该如何处理?

 //深度考贝
        deepClone(target) {
            let result;
            if (typeof target === "object") {
                if (Array.isArray(target)) {
                    result = [];
                    for (let i in target) {
                        result.push(this.deepClone(target[i]));
                    }
                } else if (target === null) {
                    result = null;
                } else if (target.constructor === RegExp) {
                    result = target;
                } else {
                    result = {};
                    for (let i in target) {
                        result[i] = this.deepClone(target[i]);
                    }
                }
            } else {
                result = target;
            }
            return result;
        }, 

用这个深拷贝，让OPTIONS保持不变，这个可能是数据双向绑定导致的问题

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 以下回答来自chatgpt:

  我可以提供以下解决方案：

  1. 使用v-model绑定el-select的选中值，当选中的值变化时，将该值赋给另一个变量selectedValue。

  <el-select v-model="priceModel.xilie" @change="selectedValue=priceModel.xilie" :options="options"></el-select>
  

  1. 在提交处理中，将priceModel.xilie赋为空。

  handleSubmit() {
    // 保存数据
    saveData();
    // 清空选中值
    this.priceModel.xilie = "";
  }
  

  1. 在selectedValue变化时，检查selectedValue是否为空，如果为空，则将el-select的选中值赋为空。

  watch: {
    selectedValue(newValue) {
      if (newValue === "") {
        this.priceModel.xilie = "";
      }
    }
  }
  

  这样el-select显示框就不会显示为空的选项了。

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