1描述

发现的问题
1.需要同时修改两个字段这是需要通过 @change方法去操作数据
2而如果此时需要增加 clear清除按钮则需要使用 @clear方法进行清除额外修改字段处理否则只会清除绑定字段
3而这时会发现 点击clear按钮会触发 change方法 而此时change没有选中数据项所以控制台会报空指针错误 并且这个问题目前没解决

2.目前处理办法是避免同时使用该操作 去除清空按钮如果需要重新输入让运营取消表单重新进行输入即可

目前处理方案

或者避免同时修改两个字段只使用一个即可

如果有解决方案欢迎评论区留言

2.演示及实例

下拉框部分

<el-dialog :title="editDialogTitle"
                       center
                       :visible.sync="editDialogVisible"
                       @close="editDialogVisible=false"
                       width="800px">
                        <el-form :model="matchEditForm">
                            <el-form-item label="选择游戏" :label-width="labelWidth">
                                <el-select v-model="matchEditForm.gameId" @change="editSelectGame" @clear="clearSelectGame"  clearable filterable placeholder="请选择/输入">
                                    <el-option
                                        v-for="item in gameSelectorList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
            </el-dialog>

方法：

            //下拉框同时清除两个参数
            clearSelectGame(){
                console.log(this.matchEditForm);
                this.matchEditForm.gameId=null;
                this.matchEditForm.test=null;
            },
            //-------------------------------------------相关方法
            //查询官方贴方法
            searchPosts:function(){
                searchOfficialPosts(this.queryData).then(resp=>{
                    // console.log(resp.data.info)
                    this.rules = resp.data.info.list;
                    this.totalSize=resp.data.info.totalElements;
                })
            },

模拟数据：

后台请求的结构数据
            gameRunningList().then(resp=>{
                 this.gameSelectorList=resp.data.info;
             });
gameSelectorList：
[{"id":121,"name":"2048"},{"name":"2048六角消除","id":124},{"name":"211_1曼曼玩母包","id":316}]

参考资料

官方element链接