前端工作小结7-封装组件

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