工作173：一级控制二级菜单的变化

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：一级控制二级菜单的变化相关推荐

仿百度糯米/美团二级菜单
好久没有打开我的CSDN博客了,也是因为年龄一年年大了,生活压力大了,思考的事情已经不在项目上了,最近看见有人给我csdn上留言,说我好久没有更新CSDN了,我刚好最近在开发一个商城项目,实现了一个简 ...
dropdownlist三级联动怎么实现_简单三步，轻松搞定一级、二级、三级下拉菜单
工作中,为了录入数据方便,数据规范,我们经常采用下拉菜单来制作规范模板,今天,技巧君和大家分享一下一级.二级和三级联动下拉菜单制作方法,文末有示例文件下载方法哦! 下拉菜单示例一级下拉菜单一级下拉 ...
css案例1——一级菜单、二级菜单、三级菜单、四级菜单
一.案例描述使用纯css代码实现多级菜单,方法简单易理解. 二.案例 1.一级菜单 (1)效果演示利用无序列表和浮动完成此效果,结构简单. 2.二级菜单 (1)效果演示 (2)代码展示 css代码 ...
k3调拨单中新增一级菜单及二级菜单
调拨单序时簿单据增加菜单插入对象运输合同 39为图标的类型 insert into t_MenuToolBar ( FToolID,FName,FCaption,FCaption_CHT,FCapt ...
html二级菜单的自动宽度,如何使用CSS控制二级导航菜单宽度？_html/css_WEB-ITnose
New Document 首页新闻国际新闻国内新闻体育新闻财经股票市场证券行情基金保险联系我们回复讨论(解决方案) .menu li ul a{ display:block; font ...
关于expanded一级二级菜单数据的分组排序
最新再弄关于expandedlistview相关的东西,所以需求是需要对一级菜单根据时间排序,同时二级菜单也需要根据时间排序,距离现在最近的时间显示在最前面. 效果就是如下: --group2 -- ...
HTML一级菜单和二级菜单区别,JavaScript点击一级菜单打开和关闭二级菜单
[JavaScript点击一级菜单打开和关闭二级菜单] ``` Document #sub_menu_1,#sub_menu_2{ display: none; } ul li:hover{ curs ...
dw二级联动下拉菜单插件宋君墨_Excel实例——一级、二级、多级下拉菜单一次讲透...
啥叫下拉菜单?啥叫一级?二级?多级?你们都在说啥? 一级下拉菜单其实是一级,这里就不再多次强调是一级了,就是下拉菜单! 当需要多人填写,又保证填写规范的时候,下拉菜单使用起来是非常有必要了!两种办法 ...
二级菜单选中，一级菜单背景变换
今天做了网站的二级菜单,但是当鼠标移动到二级菜单是,原本鼠标移动到一级菜单的hover消失,我们可以使用jQuery实现,鼠标移到标签上的方法hover,离开的方法mouseleave,实现如下: $ ...

工作173：一级控制二级菜单的变化

工作173：一级控制二级菜单的变化相关推荐

最新文章

热门文章