element 级联 父传子

html代码例子
父组件

	
	
	//改变级联传值到这个组件里面
	

子组件

	
		
			
				
			
			
				
			
			
				
			
			
				
			
			
				
			
		
	
	添加


ts

// 设置级联选择器的属性
const unitProps = {
	checkStrictly: true,//是否严格的遵守父子节点不互相关联
	emitPath: false,//是否返回数组
	filterable: true//是否可以搜索
};
//改变级联的值并且传值
const unitIdChange = (val: any) => {
//传true为新增,false为编辑
	resourceRef.value.getApplyList(val, true);
};
子组件接收的方法
//获取应用系统
const getApplyList = (val: any, isChange: any) => {
	//判断是否是change,是change才清空
	if (isChange) {
		resourceList.value = resourceList.value.map((item: any) => {
			item.applicationId = "";
			return item;
		});
	}
	getApplyListByUnitId(val).then((res: any) => {
		applicationOptions.value = res.data;
	});
};

例子展示
单位级联展示
element 级联 父传子_第1张图片
根据单位加载系统项目
element 级联 父传子_第2张图片

你可能感兴趣的:(vue.js)