為了完成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="width: 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值
如果是自定義輸入的值，列表中不存在該值，那么認為該值就是要提交的值
代碼的注釋寫的很明白了，如果仍然有什么疑問，歡迎留言。