ElementUI Tree 树形结构展示-蒲公英云

ElementUI Tree 树形结构展示

蔚落 2022-12-16 13:18 304阅读 0赞

效果图

在这里插入图片描述

实现参考ElementUI提供的控件

官网链接：ElementUITree 树形控件
我使用了节点过滤这个控件，以下为ElementUI官方提供的代码。

在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。

<el-input
  placeholder="输入关键字进行过滤"
  v-model="filterText">
</el-input>
<el-tree
  class="filter-tree"
  :data="data"
  :props="defaultProps"
  default-expand-all
  :filter-node-method="filterNode"
  ref="tree">
</el-tree>
<script>
  export default { 
    watch: { 
      filterText(val) { 
        this.$refs.tree.filter(val);
      }
    },
    methods: { 
      filterNode(value, data) { 
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    },
    data() { 
      return { 
        filterText: '',
        data: [{ 
          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>

下面是我写的具体实现

//页面实现
<el-form :inline="true" :model="searchForm" ref="searchForm" label-width="auto">
      <el-input
        style="width: 200px"
        placeholder="输入关键字进行过滤"
        v-model="filterText">
      </el-input>
      <el-tree
        @node-click="getNodeData"
        node-key="id"
        class="filter-tree"
        :data="materialTreeOptions"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        ref="tree">
      </el-tree>
</el-form>
//方法
<script>
  //调用接口fetchTree，具体后端怎么传数据可以查看我的另一篇文章哦！
  import { fetchTree} from '@/api/workshop/materialtype'
  import { mapGetters} from 'vuex'
  export default { 
    data () { 
      return { 
        filterText:'',
        searchForm:{ 
          current: 1,
          size: 10,
          materialName:'',
          materialTypeId:''
        },
        dataForm: { 
          key: ''
        },
        defaultProps: { 
          children: 'children',
          label: 'name'
        },
        materialTreeOptions:[],
        materialOptions:[],
        dataListLoading: false,
        addOrUpdateVisible: false
      }
    },
    watch: { 
      filterText(val) { 
        this.$refs.tree.filter(val);
      }
    },
    created () { 
      this.getMaterialType()
      this.getTreeselect()
    },
    computed: { 
      ...mapGetters(['permissions'])
    },
    methods: { 
      /** 通过树节点查询物料信息 */
      getNodeData(data) { 
        this.searchForm.id = data.id
        this.dataListLoading = true;
        fetchList(this.searchForm).then(response => { 
          this.dataList = response.data.data.records;
          this.totalPage = response.data.data.total;
        });
        this.dataListLoading = false;
      },
      /** 通过关键字过滤树节点 */
      filterNode(value, materialTreeOptions) { 
        if (!value) return true;
        return materialTreeOptions.name.indexOf(value) !== -1;
      },
      /** 查询物料分类下拉树结构 */
      getTreeselect() { 
        fetchTree().then(response => { 
          var chooseMaterial = []
          for (let i = 0; i < response.data.data.length; i++) { 
            chooseMaterial[i] = response.data.data[i]
          }
          this.materialTreeOptions = chooseMaterial
        });
      },
  }
</script>