php免费网站源码,网站建设电子书,网页上一页下一页代码,网页版梦幻西游伙伴1第一步
组件封装
利用$emit触发
触发结束 页面进行渲染
!--封装部门选择的插件 需要的组件 子组件--
templateel-select :valuevalue placeholder请选择所属部门 changehandleChangeel-optionv-for!--封装部门选择的插件 需要的组件 子组件--
templateel-select :valuevalue placeholder请选择所属部门 changehandleChangeel-optionv-fordepartment in departments:keydepartment.value:labeldepartment.label:valuedepartment.value/el-option/el-select
/templatescript
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);}}
};
/scriptstyle scoped/style父组件 el-form-item label所属部门 :label-widthformLabelWidthselect-form changeDepartmentList v-modelform.department_id //el-form-itemel-form-item label所属栏目 :label-widthformLabelWidth!--注意用户的返回值--el-select v-modelform.business_module placeholder请选择所属栏目 multipleel-option v-forlabel in business_module :labellabel :valuelabel/el-option/el-select/el-form-itemel-form-item label所属单元 :label-widthformLabelWidth!--注意用户的返回值--el-select v-modelform.column placeholder请选择所属栏目 multipleel-option v-forlabel in column :labellabel :valuelabel/el-option/el-select/el-form-item 方法
/*封装网络请求 该数据为所属单元和所属项目*/DepartmentList(val) {getAction(/department/attribute/val).then(res {this.business_moduleres.data.business_module;this.columnres.data.column;});},
