element ui 带过滤功能的左右侧树 （el-tree）

在实现项目功能时， 大多都是左侧是树形结构， 选中的结果使用 表格或者列表的形式展示， 这两个实现起来比较容易

今天给大家介绍下， 选中的内容， 即右侧也使用树形结构展示

场景: 左侧带过滤关键词&checkbox 多选框的树， 右侧是选中的结果数&支持删除

代码： 左侧树 和 右侧树都使用的是同一个数据源

//  左侧树







// 右侧树


  
  //自定义节点显示
  

data(){
   return {
      filterText: "",
      selectedPositionIds: [],
      defaultMediaProps:{
        children: 'position',
        label: 'name'
      },
  }
}
//给过滤的filterText 增加监听， 每次变更都会执行树的 filter-node-method 方法

watch: {
  filterText(val) {
    this.$refs.mediaPosLeftTree.filter(val);
  }
}

method: {
   init(){
     fetch.get('/media_pos').then(res => {
        this.mediaPosList = res.data
      })
     this.$nextTick(() => {
        // 等待mediaPosList更新到tree dom data上之后，再执行过滤
        this.$refs.mediaPosRightTree.filter(this.selectedPositionIds)
      });

   
  },
   //左侧树过滤方法
   filterNodePosLeftTree(value, data) { //过滤的是filterText  value 值， 即找节点name 包含value 的
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },

    //右侧树  过滤方法
    filterNodePosRightTree(value, data) {
      if (!value) return true
      return value.includes(data.id)
    },
    
    //当勾选完左侧树， 确认选择时，添加按钮函数， 再次执行右侧树的filter 方法
    addMedia(){
      //getCheckedKeys 获取选中的节点key,  true:只要叶子节点 ,默认false
      let checkedKeys = this.$refs.mediaPosLeftTree.getCheckedKeys(true)
      if(checkedKeys.length === 0){
        this.$message.warning({message: "aaa"), showClose: true})
        return
      }
      this.selectedPositionIds = checkedKeys

      //右侧树的filter， 传递的参数会传给filter-node-method, 作为第一个参数
      this.$refs.mediaPosRightTree.filter(checkedKeys) 
    },

}

结果图：