ElementUI Tree 树形结构展示

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

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]

## 实现参考ElementUI提供的控件 ##

[官网链接：ElementUITree 树形控件][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>

> fetchTree调用后台传过来已经封装好的树形数据  
> [具体实现之前写过：https://blog.csdn.net/ka\_xingl/article/details/109163852][https_blog.csdn.net_ka_xingl_article_details_109163852]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/8cd8e8ea475b41b794eaecc564ec99b2.png
[ElementUITree]: https://element.eleme.cn/#/zh-CN/component/tree
[https_blog.csdn.net_ka_xingl_article_details_109163852]: https://blog.csdn.net/ka_xingl/article/details/109163852