1第一步

組件封裝

利用$emit觸發(fā)

觸發(fā)結(jié)束 頁面進(jìn)行渲染

<!--封裝部門選擇的插件 需要的組件 子組件--> <template><el-select :value="value" placeholder="請(qǐng)選擇所屬部門" @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 {/*存儲(chǔ)部門的數(shù)據(jù)*/departments: []};},created() {/*請(qǐng)求方法*/this.load();},methods: {load() {/*請(qǐng)求接口的方法*/getAction("/department/list").then(res => {this.departments = res.data;});},/*方法調(diào)用*/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="請(qǐng)選擇所屬欄目" 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="請(qǐng)選擇所屬欄目" multiple><el-option v-for="label in column" :label="label" :value="label"></el-option></el-select></el-form-item>

?方法

/*封裝網(wǎng)絡(luò)請(qǐng)求 該數(shù)據(jù)為所屬單元和所屬項(xiàng)目*/DepartmentList(val) {getAction("/department/attribute/"+val).then(res => {this.business_module=res.data.business_module;this.column=res.data.column;});},

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。