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

<!--封装部门选择的插件 需要的组件 子组件-->
<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>