el-cascader级联选择器,对非子父关系的平级数据的处理,以及回写

1,858 阅读3分钟

前言

使用范围:el-cascader级联选择器,父子不关联,返回数据是平级,需要回写

将平级数据处理成tree状的父子数据

/*
 *将平级数据处理成父子关系的tree数据
 *适用于根据parentId和id确认子父关系的平级数据
 *parentId和id可自行替换成实际确认子父关系的属性
 *参数list是平级数据
 */
// 
ListToTree(list,parentId,id) {
	const copyList = list.slice(0);
	const tree = [];
	for (let i = 0; i < copyList.length; i++) {
		let if_father = true; //如果遍历后,copyList[i]没有父集,if_father为true,有父集为false
		// 找出每一项的父节点,并将其作为父节点的children
		for (let j = 0; j < copyList.length; j++) {
			if (copyList[i].parentId === copyList[j].id) {
				//如果copyList[i]有父集,if_father=false
				if_father = false;
				if (
					copyList[j].children === undefined ||
					copyList[j].children == ""
				) {
					copyList[j].children = [];
				}
				// 根据sn确定当前层级下标
				copyList[j].children.push(copyList[i]);
				// copyList[j].children[copyList[i].sn - 1] = copyList[i];
			}
		}
		//如果该项没有父节点,则将其当根节点
		if (if_father) {
			tree.push(copyList[i]);
		}
	}
	return tree;
},

将数据id,处理成级联选择器识别的数组id

/*
 *递归补全数组回填级联
 *参数id是你回填的id
 *参数arr是你要循环的平级数组
 *参数getIdArr是最终得到的多级id数组
 */
fn_cascader_recursion_id(id,arr,getIdArr){
	for(const item of arr) {
		if (item.id===id) {
			getIdArr.unshift(id);
			this.fn_cascader_recursion_id(item.parentId,arr,getIdArr);
		}
	}
},

案例展示,可以直接粘贴成html文件查看效果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
    	<el-cascader
    		v-model="cascader.value"
    		:options="cascader.options"
    		@change="handleChange"
    		:props="cascader.props"
    		clearable
    		filterable
    	>
    	</el-cascader>
    </div>
</body>
<script>
	// el-cascader级联选择器
	// 应用场景:父子不关联,返回数据是平级,需要回写
    new Vue({
    	el: '#app',
    	data() {
    		return {
    			cascader:{//级联
    				value: [],//选中值
    				options:[],//级联数据json
    				props: {
    					value: "id",
    					label: "name",
    					checkStrictly: true
    				},
    			},
    			//未处理的级联数据json(模拟交互返回的平级数据)
    			InitialData:[
    				{
    					id:"1",
    					parentId:"0",
    					name:"动物"
    				},
    				{
    					id:"2",
    					parentId:"0",
    					name:"植物"
    				},
    				{
    					id:"11",
    					parentId:"1",
    					name:"哺乳动物"
    				},
    				{
    					id:"12",
    					parentId:"1",
    					name:"卵生动物"
    				},
    				{
    					id:"111",
    					parentId:"11",
    					name:"人"
    				},
    				{
    					id:"1112",
    					parentId:"11",
    					name:"狗"
    				},
    				{
    					id:"1113",
    					parentId:"11",
    					name:"猫"
    				},
    				{
    					id:"121",
    					parentId:"12",
    					name:"鸡"
    				},
    				{
    					id:"122",
    					parentId:"12",
    					name:"鸭"
    				},
    				{
    					id:"21",
    					parentId:"2",
    					name:"松树"
    				},
    				{
    					id:"22",
    					parentId:"2",
    					name:"柳树"
    				},
    			],
    			//回写数据模拟
    			responseData:{
    				code: 200,
    				data: {
    					id:'111'
    				},
    				message: "请求成功",
    				success: true
    			}
    		}
    	},
    	mounted() {
    		//获取级联数据
    		this.fn_to_CascaderData();
    		//获取回写数据
    		this.fn_getData();
    	},
    	methods: {
    		handleChange(value) {
    			// console.log(value);
    			// 获得选中节点的id,工作中大多也是需要这个
    			console.log(value[value.length-1]);
    		},
    		//获取级联数据
    		fn_to_CascaderData(){
    			let arr = JSON.parse(JSON.stringify(this.InitialData));
    			this.cascader.options = this.ListToTree(arr);
    		},
    		//获取回写数据
    		fn_getData(){
    			let res = JSON.parse(JSON.stringify(this.responseData));
    			let arr = JSON.parse(JSON.stringify(this.InitialData));
    			this.fn_cascader_recursion_id(res.data.id,arr,this.cascader.value);
    		},
    
    
    		/*
    		 *将平级数据处理成父子关系的tree数据
    		 *适用于根据parentId和id确认子父关系的平级数据
    		 *parentId和id可自行替换成实际确认子父关系的属性
    		 *参数list是平级数据
    		 */
    		// 
    		ListToTree(list,parentId,id) {
    			const copyList = list.slice(0);
    			const tree = [];
    			for (let i = 0; i < copyList.length; i++) {
    				let if_father = true; //如果遍历后,copyList[i]没有父集,if_father为true,有父集为false
    				// 找出每一项的父节点,并将其作为父节点的children
    				for (let j = 0; j < copyList.length; j++) {
    					if (copyList[i].parentId === copyList[j].id) {
    						//如果copyList[i]有父集,if_father=false
    						if_father = false;
    						if (
    							copyList[j].children === undefined ||
    							copyList[j].children == ""
    						) {
    							copyList[j].children = [];
    						}
    						// 根据sn确定当前层级下标
    						copyList[j].children.push(copyList[i]);
    						// copyList[j].children[copyList[i].sn - 1] = copyList[i];
    					}
    				}
    				//如果该项没有父节点,则将其当根节点
    				if (if_father) {
    					tree.push(copyList[i]);
    				}
    			}
    			return tree;
    		},
    
    		/*
    		 *递归补全数组回填级联
    		 *参数id是你回填的id
    		 *参数arr是你要循环的平级数组
    		 *参数getIdArr是最终得到的多级id数组
    		 */
    		fn_cascader_recursion_id(id,arr,getIdArr){
    			for (const item of arr) {
    				if (item.id===id) {
    					getIdArr.unshift(id);
    					this.fn_cascader_recursion_id(item.parentId,arr,getIdArr);
    				}
    			}
    		},
    	},
    
    })
</script>
</html>