一级菜单控制二级菜单的变化
程序员文章站
2023-12-23 09:05:58
1第一步组件封装利用$emit触发触发结束 页面进行渲染
1第一步
组件封装
利用$emit触发
触发结束 页面进行渲染
<!--封装部门选择的插件 需要的组件 子组件-->
<template>
<el-select :value="value" placeholder="请选择所属部门" @change="handleChange">
<el-option
v-for="department in departments"
:key="department.value"
:label="department.label"
:value="department.value"
>
</el-option>
</el-select>
</template>
<script>
import { getAction } from "@/api";
export default {
name: "SelectForm",
/*用于和父组件通信*/
props: {
value: { type: String, require: true }
},
model: {
event: "change",
prop: "value"
},
data() {
return {
/*存储部门的数据*/
departments: []
};
},
created() {
/*请求方法*/
this.load();
},
methods: {
load() {
/*请求接口的方法*/
getAction("/department/list").then(res => {
this.departments = res.data;
});
},
/*方法调用*/
handleChange(val) {
this.$emit("change", val);
}
}
};
</script>
<style scoped></style>
父组件
<el-form-item label="所属部门" :label-width="formLabelWidth">
<select-form @change="DepartmentList" v-model="form.department_id" />
</el-form-item>
<el-form-item label="所属栏目" :label-width="formLabelWidth">
<!--注意用户的返回值-->
<el-select v-model="form.business_module" placeholder="请选择所属栏目" multiple>
<el-option v-for="label in business_module" :label="label" :value="label"></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属单元" :label-width="formLabelWidth">
<!--注意用户的返回值-->
<el-select v-model="form.column" placeholder="请选择所属栏目" multiple>
<el-option v-for="label in column" :label="label" :value="label"></el-option>
</el-select>
</el-form-item>方法
/*封装网络请求 该数据为所属单元和所属项目*/
DepartmentList(val) {
getAction("/department/attribute/"+val).then(res => {
this.business_module=res.data.business_module;
this.column=res.data.column;
});
},本文地址：https://blog.csdn.net/weixin_43392489/article/details/110229139