VUE 拖拽筛选

• 本次记录下项目里面遇见的坑，如图所示，这个需求，这个步骤上一步时我上次发的将SQL文件传给后台，然后，后台将SQL文件的字段解析出来，我在这里将其按照图示操作，这里主要涉及拖拽，还有一个就是筛选

• 思考：操作数据，让数据在其中流动，尽量不动dom元素，这里所有操作都是基于对象数组

  
  
  筛选.gif
• 先说筛选，此处输入筛选字段，向后台发送请求，得到所有包含筛选字段的对象数组，然后将分库分表，孤立表，全局表三个格子的数据用concat链接起来，将请求的数据和格子的数据，做对比，将其一样的给删除（此处有个坑）

 Fiter() {
      let param = {
        sql: localStorage.sql,
        clusterId: this.id,
        databaseName: localStorage.getItem("dataBaseName"),
        condition: this.tagFilter
      };
      console.log(param);
      Api.newRule
        .getDDL(param)
        .then(res => {
          if (res.data.resCode == 10000) {
          // console.log(res.data.data.tableList);
            let dataArr = []
            this.tags = []
            let _data = res.data.data.tableList
            console.log(_data);//这是我请求到的数据
            let arr = []
          
            console.log("分库分表");
             let arr0 = this.guDatas;
              
             console.log("孤立表");
             let arr1 = this.quanDatas;   

              console.log("quanju表");
             let arr2 = this.qiDatas;
             arr =   arr0.concat(arr1).concat(arr2)
           
            console.log(arr)
            for (let i = 0; i < _data.length; i++) {
              console.log(_data[i].name)
              for (let j = 0; j < arr.length; j++) {
                console.log(arr[j].name)        
                if ( _data[i].name == arr[j].name) {
                    // _data.splice(i,1) 
                    //这里是个坑，开始我直接用splice方法，删除一样的数据，但是没注意到，
                    //此处删除了，_data的数据就改变了，不在时原来的数据，
                    //造成的后果就是筛选的时候上面会出现你已经选过的数据，
                    //造成数据越筛选越多，所以这里又做了下面的循环，用第三方避免这种情况
                  dataArr.push(_data[i])     
                }else {
                }
              }
            }
           localStorage.setItem('_dataData',JSON.stringify(_data))
            this.tags = JSON.parse(localStorage._dataData)
            console.log(this.tags)
            for (let i = 0; i < dataArr.length; i++) {
              for (let j = 0; j < this.tags.length; j++) {
               if ( dataArr[i].name == this.tags[j].name) {
                 this.tags.splice(j,1) 
               }
                
              }
              
            }
         
          }
        })
    },
//由于这是临上线发现的BUG。所以仓促改的，代码有些乱，上线了在进行优化一下代码

• 另外一个就是拖拽了，比较简单，但是需要细心，直接上代码吧，看了就懂了，这是整个这个页面的代码，我把之前的拆分又给整合了，为了贴上来方便，代码实际中，这种页面还是拆分为模块比较好

+先写到这里吧