解决iview的select既可以编辑又可以选择（在iview的select基础上修改）

为了完成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的select既可以编辑又可以选择（在iview的select基础上修改）

猜你喜欢