关于前端: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) 
    },

}

后果图:

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据