前端工作小结13-第一次组件封装

<!--封装部门选择的插件 需要的组件-->
<template>
  <el-select :value="value"  placeholder="请选择所属栏目" @change="handleChange">
    <!--注意用户的返回值-->
    <el-option v-for="value in column" :label="value" :value="value"></el-option>
  </el-select>
</template>
 
<script>
import { getAction } from "@/api";
export default {
  name: "SelectLabel",
  /*用于和父组件通信*/
  props: {
    value: String
  },
  model: {
    prop: "value",
    event: "change"
  },
  data() {
    return {
      /*存储所属的数据*/
      column:[]
    };
  },
  created() {
    /*请求方法*/
    this.list();
  },
  methods: {
    list() {
      /*请求接口的方法*/
      getAction("/department/attribute/1").then(res => {
        console.log(1)
        console.log(res.data.column)
        this.column=res.data.column
      });
    },
    /*方法调用*/
    handleChange(val) {
      this.$emit("change", val);
    }
  }
};
</script>
 
<style scoped></style>