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;});},

總結

以上是生活随笔為你收集整理的工作173：一级控制二级菜单的变化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。