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

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

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

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

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

//  左侧树
<el-input
  :placeholder="请输入关键词过滤"
  v-model="filterText">
</el-input>

<el-tree
  :data="mediaPosList"  // 展示的数据
  node-key="id"         //每个节点的唯一标识
  :props="defaultMediaProps"  // 数据结构的配置项
  show-checkbox              // 显示勾选框
  check-on-click-node        //点节点名称时选择勾选
  :filter-node-method="filterNodePosLeftTree"   //筛选过滤方法 返回true：显示 false：不显示
  :default-checked-keys="selectedPositionIds"  //默认勾选节点key 值列表
  ref="mediaPosLeftTree">
</el-tree>


// 右侧树

<el-tree
  :data="mediaPosList"
  node-key="id"
  :props="defaultMediaProps"
  :filter-node-method="filterNodePosRightTree"
  ref="mediaPosRightTree">
  
  //自定义节点显示
  <template slot-scope="{node, data}">
    <span>
      <el-button 
      v-if="!data.position"
      type="text" 
      icon="el-icon-close"
      @click="removeOneMedia(data.id)"
      style="margin-right:10px;"
      ></el-button>
      <label>{{node.data.name}}</label> 
      
    </span>
  </template>
</el-tree>

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) 
    },

}

结果图：