前端工作总结128-一级控制二级菜单的变化

简介: 前端工作总结128-一级控制二级菜单的变化

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>

image.png

相关文章
|
1月前
|
前端开发
前端如何制作简易的菜单多级导航栏
前端如何制作简易的菜单多级导航栏
33 0
|
4月前
|
开发框架 JSON 前端开发
Vue&Element 前端应用开发之菜单和路由的关系
Vue&Element 前端应用开发之菜单和路由的关系
|
4月前
|
开发框架 JSON 前端开发
循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理
循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(17)--- 菜单资源管理
循序渐进VUE+Element 前端应用开发(17)--- 菜单资源管理
|
4月前
|
存储 前端开发 JavaScript
前端菜单及按钮权限拦截,实现方案及思路
此实现方案基于vue框架,并需要依赖vue项目相关的库,router、store等等;前端同学要与后端同学协商,常规是让后端返回一个树结构的菜单数据,并且将所有的涉及权限控制的页面path给到后端,如果是按钮,需要把所有的按钮 code 码统一下,这是前期工作,很重要。
|
前端开发
【前端异常】解决前端引入Bootstrap的dropdowns 菜单时报错,Uncaught TypeError: Bootstrap‘s dropdowns require Popper.js
【前端异常】解决前端引入Bootstrap的dropdowns 菜单时报错,Uncaught TypeError: Bootstrap‘s dropdowns require Popper.js
115 0
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件3
前端学习笔记202305学习笔记第二十三天-重构菜单组件3
48 0
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件2
前端学习笔记202305学习笔记第二十三天-重构菜单组件2
52 1
|
数据可视化 前端开发
前端学习笔记202304学习笔记第十九天-vue3.0-了解可视化面板左侧菜单
前端学习笔记202304学习笔记第十九天-vue3.0-了解可视化面板左侧菜单
50 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-菜单路由和面包屑1
前端学习笔记202305学习笔记第二十二天-菜单路由和面包屑1
38 0