vue+element-plus的el-tree和el-tree-select

vue+element-plus的el-tree和el-tree-select_第1张图片

在项目中有一个添加的类目里面有一个这样的选择,刚开始做项目一直用的是el-tree,于是做这个的时候用的也是el-select+el-tree等做完之后才发现还有更方便的el-tree-select结合,于是也做了一边接下来我把俩个方法都写上,首先是el-select+el-tree

html


	
		
			
			
		
	

js 

data(){
    operateType:"",
    options:[],
    menuProps: {//获取operateTypeName的名字
		label: (data) => {
			return data.operateTypeName;
			},
		},
}
//调取数据
async getGroup() {
   var res = await this.$API.接口所在位置.get();
   if(res.code===200){
       //forEach一下父子级的关系,来进行排序
        res.data.forEach((ele) => {
			const parentId = ele.parentId;
			if (parentId === 0) {
				 return;
			} else {
				res.data.forEach((e) => {
					if (e.id === parentId) {
						let childrenaa = e.children;
						if (!childrenaa) {
							childrenaa = [];
						}
						childrenaa.push(ele);
						e.children = childrenaa;
					  }
				});
			}
		});
		res.data = res.data.filter((ele) => ele.parentId === 0);
		this.options = res.data;
    }
},
//点击树
handleNodeClick(data) {
	this.operateType = data.operateTypeName;//点击渲染到选框里
	this.$refs.select.blur();
			
},

这个方法就完成了,接下来是el-tree-select这个方法

html


	

好了,这就ok了js都是一样的

你可能感兴趣的:(vue.js,elementui,javascript,前端)