在一个项目中,有这样一个需求: 现在有一个table表格,一个el-tree树,下拉选择框, 表格中有一些默认数据, 当下拉选择类型后,可以勾选对应tree的子节点,勾选或取消勾选,动态展示在table表格中

遇到的问题:

使用@check-change时, 点击节点时,会多次触发, 勾选时,虽然会多次触发@check-change,但还是可以正常添加数据
然而, 在取消勾选时, 如果点击的是叶子节点, 因为多次触发@check-change, 执行数组删除操作时,就会把这个分类下所有的数据都删掉, 很明显不符合要求, 所以改用了@check事件。
但是@check事件只能获取当前操作的数据，和已经勾选的数据，不知道此时是勾选还是取消勾选操作。
此时的做法就是: 在check事件中,先获取到所有的已经勾选的节点,然后, 用此时操作的节点数据在所有已经勾选的节点数组中查找, 如果在其中,那么, 再在table数组中查找,如果table中没有,就表示此时是勾选操作, 把数据添加到table数组中; 如果此时操作的数据没有在已经勾选的节点数组中, 就表示此时是取消勾选操作, 那么, 就需要进一步查找是否在table中存在这个数据,如果有,就需要删除table数组中的这个数据

<el-table
   :data="tempArr"
   :height="gridTableHeight"
   border
   style="width: 100%" >
   <el-table-column
     align="center"
     prop="label"
     label="已选网格"
     min-width="60">
   </el-table-column>
   <el-table-column
     align="center"
     prop="id"
     label="网格类型"
     min-width="60">
   </el-table-column>
</el-table>
 <el-tree
   :data="gridTrees"
     show-checkbox
     :default-expand-all="false"
     node-key="id"
     ref="gridTree"
     highlight-current
     render-after-expand="false"
     :props="defaultProps"
     :default-expanded-keys="defCheckKey"
     :default-checked-keys="defCheckKey"
     :render-content="renderContent"
     @check="handleCheckChange"
   >
</el-tree>

data中的数据:

tempArr:[{
         id: 20,
         label: '哈哈',
       },{
         id: 12,
         label: '第三网络',
       },{
       id: 15,
       label: '第五网络',
     }],
gridTrees: [{
  id: 1,
  label: '烟台经济技术开发区',
  hasChildren: true,
  children: [{
    id: 4,
    label: '福莱山街道',
    hasChildren: true,
    children: [{
      id: 9,
      label: '福泉社区',
      hasChildren: true,
      children: [{
        id: 10,
        label: '第一网络',
      },{
        id: 11,
        label: '第二网络',
      },{
        id: 12,
        label: '第三网络',
      }],
    },{
      id: 15,
      label: '第五网络',
    } ]
  }]
}, {
  id: 2,
  label: '一级 2',
  hasChildren: true,
  children: [{
    id: 5,
    label: '二级 2-1',
  }, {
    id: 6,
    label: '二级 2-2',
  }]
}, {
  id: 3,
  label: '一级 3',
  hasChildren: true,
  children: [{
    id: 7,
    label: '二级 3-1',
  }, {
    id: 8,
    label: '二级 3-2',
  }]
}],
defaultProps: {
  children: 'children',
  label: 'label'
},

methods:

//  根据勾选和取消勾选,添加或删除table中的数据
updateCheckData(data,arrs){
  // console.log(data,arrs)
  if(data.hasChildren){
    for (let i = 0; i < data.children.length; i++) {
      this.updateCheckData(data.children[i],arrs);
    }
  }else{
    if(arrs.indexOf(arrs.filter(val=>val.label==data.label)[0])!=-1){  // 当前勾选或取消的项是否在已经勾选的数组中
      // 当前勾选的项是否在table所有数据的数组中
      console.log(1111111)
      if(this.tempArr.indexOf(this.tempArr.filter(val=>val.label==data.label)[0])==-1){
        this.tempArr.push(data);
      }
    }else{  //  当前操作的项不在已经勾选的数组中,就是取消勾选操作, 再判断当前操作的项是否在table所有数据的数组中
      if(this.tempArr.indexOf(this.tempArr.filter(val=>val.label==data.label)[0])!=-1){  // 在table所有数据的数组中
          this.tempArr.splice(this.tempArr.indexOf(this.tempArr.filter(val=>val.label==data.label)[0]),1);
      }
    }
  }
  // console.log(this.tempArr)
},
handleCheckChange(data,checkData) {
 console.log(data,checkData)
    this.updateCheckData(data,checkData.checkedNodes)
  },