index.vue

<template>
  <el-select
    v-model="selectValue"
    style="width: 100%"
    @change="change"
    placeholder="请选择分类"
    clearable
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>

<script>
import { getList } from "@/api/system/category";

export default {
  name: "Class",
  props: ["value"],
  model: {
    prop: "value",
    event: "input",
  },
  data() {
    return {
      selectValue:'',
      options: []
    };
  },
  watch: {
		value(newName, oldName) {
      this.selectValue=newName;
		}
	},
  created() {
    this.getList();
    this.selectValue=this.value;
  },
  methods: {
    /** 查询列表 */
    getList() {
      getList().then((response) => {
        this.options = response.data;
      });
    },
    change(value) {
      this.$emit("input", value);
    },
  },
};
</script>