美文网首页
el-tree实现过滤时展开子节点

el-tree实现过滤时展开子节点

作者: 海豚先生的博客 | 来源:发表于2020-09-01 10:22 被阅读0次
    // 首先按照官网的栗子写好基本样式
    // el-tree配置过滤函数及点击事件
    :filter-node-method="filterNode"
    @node-click="nodeClick"
    // el-input配置过滤文本框
    v-mode="filterText"
    // data中
    pid:[]
    methods: {
    // 点击节点将节点内容放进input
      nodeClick(data) { this.filterText = data.label}
    // 过滤函数
      filterNode() {
        if(!node) return true
        const parentId =node.parent.data.id
        if(parentId) {
          if(this.pid.includes(parentId)){
            return true
           }
            // return false 不能return false,否则不展示
        }
      if(data.label.indexOf(value) !==1) {
        this.pid.push(data.id)
        return true
       }
        return false
    }
    watch:{
      filterText(val) {
        this.pid = []
        this.$refs.mytree.filter(val)
      }
    }
    

    相关文章

      网友评论

          本文标题:el-tree实现过滤时展开子节点

          本文链接:https://www.haomeiwen.com/subject/tbimsktx.html