elementUI组件的使用记录---树形控件（el-tree）

在elementUI中找了一下，发现有一个刚好符合我的需求，就拿来用了。没有其他多余的功能，基础的就可以。

html：

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
<!-- :data="data"数据列表，到时候从后端接口里取就可以了。-->
<!-- @node-click="handleNodeClick"点击节点是的回调，刚好我需要点击来和地图联动，就留下了-->
<!-- :props="defaultProps"用来配置节点字段和子节点字段的-->

js：

data(){
    return(){
        defaultProps: {
            //节点字段调整，因为数据返回的有三级，每一级的字段都不相同，所以需要单位设置
           label: function(data) {
                if (data.name) {
                    //第一级
                    return data.name;
                } else if (data.subName) {
                    //第二级
                    return data.subName;
                } else if (data.smallName) {
                    //第三级
                    return data.smallName;
                }
            },
            children: "children",
       },
       treeData:[],
       pageNumber: 1, //页码
       pagesize: "", //每页个数
       allSize: 1,//总页数
    }
}

然后还需要设置一个滚动到底部会自动获取剩余数据，毕竟数据不可能只有一页，

mouted(){
    this.loadMoreUser();
    this.getProListData();
},
methods:{
    loadMoreUser() {
        //   获取el-tree的dom
	let treeDom = document.getElementsByClassName("proContent");
        //   计算每页个数，让初始化获取每页个数都铺满容器。 +5是为了初始化有个滚动条。
	this.pagesize = parseInt(treeDom[0].offsetHeight / 40) + 5;
        添加滚动添加事件
	treeDom[0].addEventListener("scroll", () => {
                //  判断是否滚动到了底部。
		if (treeDom[0].scrollTop + treeDom[0].clientHeight === treeDom[0].scrollHeight) {
                        判断总共有多少页，数据总条数除以每页的个数，大于页数时到底页不再获取数据，
			if (this.allSize / this.pagesize > this.pageNumber) {
                                // pageNumber用来判断获取了多少次数据，初始化就
				this.pageNumber++;
				this.getProListData();
			}
		}
	});
    },
    getProListData(){
        const params={}
        apis.post("url",params).then(data =>{
            console.log(data);
            this.allSize = data.data.pagination.totalRecodes; //总条数
            let myData = data.data.data;
            //如果页码为1的时候，直接把返回的数据列表赋值给data里的treeData,否则就把返回的数据插在treeData数组尾部。
            if (this.pageNumber == 1) {
                    this.proList = myData;
            } else {
                    myData.forEach((ele) => {
                            this.proList.push(ele);
                    });
            }
        }).catch(err =>{
            console.log(err);
        })
    }
}

如果还有其他类型的数据时一定要把pageNumber变量重置为1

还要有一个回到顶部的按钮

goToTop() {
	let treeDom = document.getElementsByClassName("proContent");
	console.log(treeDom[0].scrollTop);
	treeDom[0].scrollTop = 0;
	//回到顶部
},

本来应该有平滑滚动动画的，看了项目其他相同的功能没有动画，也就没有做。（好像也不好做）。