解决方法:

 1、remote-method 方法啥也不干,但必须要有,实际调用on-query-change 方法筛选

html

<Select
        v-model="gasCode"
        placeholder="请输入油站名称"
        ref="stationSelect"
        clearable
        filterable
        remote
        :remote-method="remoteM"
        @on-query-change="remotedMethod"
        @on-change="getStationCode"
        style="width: 200px;"
>
    <Option
            v-for="(item,index) in stationListSel"
            :key="index"
            :value="item.StationCode"
            :label="item.StationName"
    >{{item.StationName }}
    </Option>

调用

this.gasCode = data.GasCode
if(data.GasName){
 setTimeout(() => { //使用定时器延迟执行,否则会赋值不成功
        let flag = this.remotedMethod(data.GasName)
        if (!flag) { //组件没赋值成功,直接给组件赋值
            this.$refs["stationSelect"].query = data.GasName
            this.gasCode = data.GasCode
         }
     }, 200)
}

 2、使用remote-method 筛选,后使用 this.$refs['compoents'].query=query 

请看:this.$refs["stationSelect"].query = query(搜索内容)

               <Select
                        v-model="code"
                        placeholder="请输入名称"
                        ref="stationSelect"
                        :transfer="true"
                        clearable
                        filterable
                        :label-in-value="true"
                        :remote-method="remotedMethod"
                        @on-query-change="clearInput"
                        style="width: 200px;"
                >
                    <Option
                            v-for="(item,index) in stationSel"
                            :key="index"
                            :value="item.value"
                            :label="item.label"
                    >{{item.label }}
                    </Option>
                </Select>
  // 选择框过滤(远程搜索)
            remotedMethod(query) { //当父组件传值进入时调用该方法
                if (!query) return this.stationSel = []
                const list = this.stationList.map(item => {
                    return {
                        value: item.code,
                        label: item.name
                    };
                });
                this.stationSel = list.filter(item => item.label.indexOf(query) > -1);
                this.$refs["stationSelect"].query = query  //内容选中后选择框显示(解决鼠标移出后选择框清空问题)
            },
             //清空
            clearInput(e) {
                if (!e) this.stationSel = []
            },
//点击编辑时的显示
 editFun(data){
    this.editInfo=Object.assign({},data}
    //延迟触发(不然可能会不显示)
    setTimeout(()=>{
    this.remoteMethod(data.CodeName)

    },200)


}

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐