vue实现多个下拉去重

我们先来看一个图：

演示去重

可以看到，在添加下拉之后，之前选过的选项不会出现在下拉里面了。
线上地址： 线上地址
整个实现过程是用vue实现的，总体来说蛮简单，如果用jQuery实现就会复杂得多。
下面我们来看看vue-devtool里面的数据：

数据结果

从数据层面，容易看出，整个下拉数据是来自 selectMap，通过比较 selectItemList来判断是否已经选中，选中的选项不显示。通过求和 money计算出 total.
下面看一下具体实现：

选择款项，并填写费用
    

      
        
      
      
      
      
    
    
{{`总费用：${total}元`}}

需要用到的函数：

//控制选项是否显示
isSelect(id,currentId){
        if(currentId === id){
          return true
        }
        for(let i in this.selectItemList){
          if(this.selectItemList[i].id === id){
            return false
          }
        }
        return true
      }
//新增
add(){
        this.selectItemList.push({id:'',money:0})
      }
//删除
reduce(index){
        this.selectItemList.splice(index,1)
      }
//求和
total(){
        let total = 0
        this.selectItemList.forEach(row => {
          if(row.id){
            total += parseInt(row.money) || 0
          }
        })
        return total
      }

整体实现是蛮简单的，之前用jQuery实现过一次，感觉超级麻烦，用选择器控制dome是否显示，判断一大堆，还容易搞错了，没一步都要绑定change事件，来让view与model保持一致。使用vue实现就完成不用担心这些问题了，整个实现过程没有绑定一个change。
所有的代码都能在GitHub下载：下载。
想看更多文章，可以关注我的个人公众号：

公众号