巧巧里 2021-12-06 09:41 采纳率: 50%
浏览 98
已结题

vue+element+select选择器,点击清空后,会显示另外一个值,再次点击清空才会清空

把选择器给组件化出来,数据是远程加载的,设置了清空功能,但是第一次点击清空后,选择器会变成另外一个值,再次点击清空后才会真正清空;且这种情况是在有些选项中出现,有些选项则不会需要二次点击情况

<template>
  <el-select filterable ref="comp" v-model="localCompName" @change="compCodeChange" clearable :filter-method="getCompDropDown" @visible-change="visibleChange" placeholder="请选择" size="small">
    <el-option
      v-for="item in compDropDownOptions"
      :key="item.compName"
      :label="item.compName"
      :value="item.keyCode" style="width: 440px;">
      <el-row>
        <el-col :span="6">
          <span style="color: #8492a6; font-size: 13px">{{ item.keyCode }}</span>
        </el-col>
        <el-col :span="18">
          <span>{{ item.compName }}</span>
        </el-col>
      </el-row>
    </el-option>
    <el-pagination
      small
      :total="dropDownTotal"
      :current-page.sync="compDropDownQueryParams.pageNum"
      :page-size="compDropDownQueryParams.pageSize"
      @current-change="getCompDropDown()"
      @prev-click="getCompDropDown()"
      @next-click="getCompDropDown()"
    />
  </el-select>
</template>
compCodeChange(val){
        this.$emit('getCompCode', val)
        this.$emit('getCompName', this.$refs.comp.hoverOption.currentLabel)
        this.$forceUpdate();
      },
      //下拉方法,失去或获得焦点时对文本框进行校验
      getCompDropDown(val){
        this.compDropDownQueryParams.compName = val;
        getCompDropDown(this.compDropDownQueryParams).then(response => {
          this.compDropDownOptions = response.rows;
          this.dropDownTotal = response.total;
        });
      },
      visibleChange(val){
        if(val){
          this.getCompDropDown(this.localCompName);
        }else{
          if(this.localCompName == null){
            this.localCompName = null;
            this.localCompCode = null;
          }
        }
        this.$forceUpdate();
      },

已经试过强刷了,没有效果(也可能我用的地方不对);
本来想把clearable写成一个函数再返回true看看,结果报错说clearable必须是boolean不能是function,没法试…

  • 写回答

2条回答 默认 最新

  • 前端阿彬 前端领域新星创作者 2021-12-06 10:05
    关注

    1.页面没有报错吗,看看你下拉列表的数据,
    2. :key绑定的item.compName是唯一值吗,不应该是keyCode才是他的唯一id吗,看看你
    3. 清空的时候也会调用change事件,看看你compCodeChange这个方法里emit的那俩方法是不是影响到了
    4.这个清空正常是不会出问题的,应该是你页面有bug给影响到了

    如有帮助,望采纳^.^ 谢谢

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 12月14日
  • 已采纳回答 12月6日
  • 创建了问题 12月6日

悬赏问题

  • ¥15 请上面代码做什么处理或什么混淆
  • ¥15 英雄联盟自定义房间置顶
  • ¥15 W5500网线插上无反应
  • ¥15 如何用字典的Key,显示在WPF的xaml中
  • ¥15 weautomate读取Excel表格信息然后填写到网页一直报错,如何解决?
  • ¥15 C#如何在Webview2中获取网页验证码
  • ¥15 esp32烧录失败,具体情况在图片上
  • ¥15 selenium安装报错
  • ¥15 在node.js中无法安装yarn
  • ¥15 python程序修改