zoukankan      html  css  js  c++  java
  • elementui tree 节点过滤加载对应子节点

    /官网例子
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>
    
    <el-tree
      class="filter-tree"
      :data="data2"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      ref="tree2">
    </el-tree>
    
    <script>
      export default {
        watch: {
          filterText(val) {
            this.$refs.tree2.filter(val);
          }
        },
    
        methods: {
        //不会返回匹配的node的子节点
          filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
          }
        },
    
        data() {
          return {
            filterText: '',
            data2: [{
              id: 1,
              label: '一级 1',
              children: [{
                id: 4,
                label: '二级 1-1',
                children: [{
                  id: 9,
                  label: '三级 1-1-1'
                }, {
                  id: 10,
                  label: '三级 1-1-2'
                }]
              }]
            }, {
              id: 2,
              label: '一级 2',
              children: [{
                id: 5,
                label: '二级 2-1'
              }, {
                id: 6,
                label: '二级 2-2'
              }]
            }, {
              id: 3,
              label: '一级 3',
              children: [{
                id: 7,
                label: '二级 3-1'
              }, {
                id: 8,
                label: '二级 3-2'
              }]
            }],
            defaultProps: {
              children: 'children',
              label: 'label'
            }
          };
        }
      };
    </script>
    

     

  • 相关阅读:
    JAVA程序员_常用英语
    Java基础常见英语词汇
    oracle sqlplus常用命令大全
    Ognl_JSTL_学习笔记
    DBA操作
    ssh面试题总结
    数据库面试笔试题集
    基本select 语句总结
    JSP面试知识
    featureCounts 软件说明
  • 原文地址:https://www.cnblogs.com/zhouyx/p/11890327.html
Copyright © 2011-2022 走看看