关于前端:element-ui-带过滤功能的左右侧树-eltree

在实现我的项目性能时，大多都是左侧是树形构造，选中的后果应用 表格或者列表的模式展现，这两个实现起来比拟容易

明天给大家介绍下，选中的内容，即右侧也应用树形构造展现

场景: 左侧带过滤关键词 &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) 
    },

}

后果图：