1第一步

组件封装

利用$emit触发

触发结束 页面进行渲染

<!--封装部门选择的插件 需要的组件 子组件-->
<template><el-select  :value="value" placeholder="请选择所属部门" @change="handleChange"><el-optionv-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;});},