ElementUI Tree 树形结构展示

效果图

实现参考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>

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