frontend-admin/src/components/ExamRoomSelect.vue

<template>
  <el-select
    v-model="selected"
    class="size-select"
    placeholder="请选择"
    @change="select"
    :style="styles"
    filterable
    remote
    :remote-method="search"
    clearable
  >
    <el-option
      v-for="item in optionList"
      :key="item.roomCode"
      :label="item.roomName"
      :value="item.roomCode"
    >
      <span>{{ item.roomName }}</span>
    </el-option>
  </el-select>
</template>

<script>
import { object2QueryString } from "@/utils/utils";
export default {
  name: "ExamRoomSelect",
  props: {
    examId: String,
    value: [String, Array],
    styles: { type: String },
  },
  data() {
    return {
      optionList: [],
      selected: "",
    };
  },
  async created() {
    this.search();
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.selected = val;
      },
    },
    examId: {
      immediate: true,
      handler(val, oldval) {
        if (val !== oldval) {
          this.search("");
          this.$emit("input", "");
          this.$emit("change", {});
        }
      },
    },
  },
  methods: {
    async search(query) {
      this.optionList = [];
      if (!this.examId) return;
      const res = await this.$http.post(
        "/api/admin/sys/exam/privilegeQuery?" +
          object2QueryString({ examId: this.examId, roomName: query })
      );
      // console.log(res.data);
      this.optionList = res.data.data.examRooms;
    },
    select() {
      this.$emit("input", this.selected);
      this.$emit("change", this.selected);
    },
  },
};
</script>

<style></style>