vue+element ui 完成树形数据穿梭框-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue+element ui 完成树形数据穿梭框。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

element ui中的穿梭框只能实现平铺数据的穿梭，这次的需求是要树形数据穿梭，所以写的是tree组件自己组合的穿梭框
element ui 里面的穿梭框el-transfer 能展示树状吗,vue,vue.js,ui,javascript 文章来源地址https://www.toymoban.com/news/detail-550057.html

<div class="flex_square">
  <div class="tree-tranfer tree-tranfer-left">
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="leftFilter">
    </el-input>
    <el-tree
      class="filter-tree"
      :props="defaultProps"
      :data="dataLeft"
      show-checkbox
      ref="treeLeft"
      node-key="id"
      :filter-node-method="filterNode"
      @check-change="leftChange">
    </el-tree>
  </div>
  <div class="transfer-btns">
    <el-button icon="el-icon-arrow-left" type="primary" :disabled="!delData.length" @click="deleteItems"></el-button>
    <el-button icon="el-icon-arrow-right" type="primary" :disabled="!addData.length" @click="addItems"></el-button>
  </div>
  <div class="tree-tranfer tree-tranfer-right">
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="rightFilter">
    </el-input>
    <el-tree
      class="filter-tree"
      :props="defaultProps"
      :data="dataRight"
      show-checkbox
      ref="treeRight"
      node-key="id"
      :filter-node-method="filterNode"
      @check-change="rightChange">
    </el-tree>
  </div>
</div>

// 逻辑部分
deleteItems(){
  // 1.从右侧删除选中的数据,要用这个方法getCheckedNodes，元素标签必须配node-key
  let list = this.$refs.treeRight.getCheckedNodes()
  for(let item of list){
    let index = this.dataRight.findIndex(item2=> item.id == item2.id)
    if(index>=0){
      this.dataRight.splice(index,1)
    }
  }      
  // yuansiData 这个直接取初始化时的dataLeft值就行
  this.dataLeft = JSON.parse(JSON.stringify(this.yuansiData)) 
  for(let index in this.dataLeft){
    // 如果有子级去删除子级
    for(let item of this.dataRight){
      let ind = this.dataLeft[index].children.findIndex(item2=>{
        return item2.id == item.id
      })
      if(ind>=0){
        this.dataLeft[index].children.splice(ind,1)
      }
    }
  }
  this.dataLeft = this.dataLeft.filter(item2=>{
    return item2.children.length!=0
  })
},
addItems(){
  let list = this.$refs.treeLeft.getCheckedNodes()
  const parList = list.filter(item=>{
    return item.children
  })
  for(let item1 of parList){
    let index = this.dataLeft.findIndex(item2=>{
      return item2.id == item1.id
    })
    if(index>=0){
      this.dataLeft.splice(index,1)
    }
  }
  list = list.filter(item=>{
    return !item.children
  })
  // 这里做了三重循环，如果有可能需要对其进行优化
  for(let item of list){
    for(let ind in this.dataLeft){
      if(this.dataLeft[ind].children.length){
        let index = this.dataLeft[ind].children.findIndex(item2=>{
          return item2.id == item.id
        })
        if(index>=0){
          this.dataLeft[ind].children.splice(index,1)
        }
      }
    }
  }
  this.$refs.treeLeft.setCheckedNodes([])
  // 将选择的项添加到右侧
  this.dataRight.push(...list)
},

// 样式部分
.flex_square{
  display: flex;
  align-items: center;
  .tree-tranfer{
    width: 198px;
    height: 246px;
    border: 1px solid #EBEEF5;
    padding: 10px;
    overflow-y: auto;
  }
  .transfer-btns{
    padding: 0px 30px;
  }
}