为了完成select既可以编辑，又可以修改。前段时间通过iview的另外一个自动完成auto-complete组件完成了此功能。
有兴趣的可以到看我上一篇随笔 https://www.cnblogs.com/mayiaction/p/12030504.html。
花了一番功夫，使用select也实现了这个功能。代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iview example</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css"> <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script> </head> <body> <div id="app"> <i-select style=" 200px" ref="test" v-model="model11" filterable allow-create @on-query-change="isQueryChange"> <i-option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</i-option> </i-select> </div> <script> window.vm = new Vue({ el: '#app', data: { cityList: [ { value:'n', label:'NewYork' }, { value:'l', label:'London' }, { value:'s', label:'Sydney' }, { value:'o', label:'Ottawa' }, { value:'p', label:'Paris' }, { value: 'c', label: 'Canberra' } ], model11: '', //绑定值，用来存储iview组件绑定的值，但我这种做法，在提交的时候，不是使用改值，该值更多是为了完成页面效果 model12: '' //实际值，实际提交的时候需要传递给后台的实际值 }, methods: { //每次输入框内容改变的时候触发的方法 isQueryChange: function (value) { let that = this; let refObj = this.$refs.test; //调整iview的样式，filterQueryChange是为了关闭iview的过滤功能，另外需要隐藏掉iview的allow-create添加的弹出层 Vue.nextTick(function(){ refObj.filterQueryChange=false; $(refObj.$el).find(".ivu-select-item-enter").parent().hide(); // 隐藏allowCreate弹出层 }) let list = this.cityList; let isExist = false; //根据输入的值到list中找，如果输入的值和list中的label匹配，那么将匹配值的value赋值给绑定值和实际值 for(let i=0;i<list.length;i++){ if(list[i].label == value){ that.model11 = list[i].value; setTimeout(function(){ //为了解决iview的小bug，将选中的阴影效果转移到选中的值上（iview选中一个值后，字体会变成蓝色，背景会变成暗灰色，但是不明白为什么要把二者的数据绑定分开，这个bug会导致如果非页面手动点击（比如页面初始化后），被选择的值的背景是白色的，但是手动点击是灰色的） refObj.focusIndex = i; },0) that.model12 = list[i].value; isExist = true; } } if(!isExist){ //如果前边的list中没有输入的值，此时不应该选中任何值，所以先把选择框绑定的值设置为空 this.model11 = ""; //此时需要提交后台的值就是自定义输入的值，赋值给实际值 that.model12 = value; //这里是为了解决iview的小bug，清除掉选中后的阴影效果 refObj.focusIndex = -1; } } } }) </script> </body> </html>
这种做法最大的缺点就是 v-model 绑定的值并非我们最终要提价给后台的值，但是由于v-model绑定的值是跟页面绑定的，由于iview自身会通过该值去做一些操作，想要完成可编辑的功能，借助该值，会出现各种各样的问题。
贴一下运行结果：
如果勾选了列表的选项，取得的值就是选项所对应的value值
如果是自定义输入的值，列表中不存在该值，那么认为该值就是要提交的值
代码的注释写的很明白了，如果仍然有什么疑问，欢迎留言。