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>