order-ui-pc/src/components/stockSearch.vue

<template>
  <div
    class="stockSearch"
    style="display: inline-block; width: 300px; padding-left: 10px"
  >
    <el-select
      style="width: 100%"
      :disabled="isDisabled === ''"
      :size="isSize ? searchSize : ''"
      v-model="value"
      multiple
      filterable
      remote
      reserve-keyword
      placeholder="请选择仓库"
      :remote-method="remoteMethod"
      :loading="loading"
      @change="a"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: ["isDisabled", "isSize"],
  data() {
    return {
      company_name: "",
      options: [],
      value: [],
      list: [],
      states: [],
    };
  },
  mounted() {
    this.list = this.states.map((item) => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  },
  watch: {
    companyName: "nameChange",
  },
  computed: {
    ...mapGetters(["searchSize"]),
  },
  // props: ["options", "companyName", "stockName"],
  methods: {
    nameChange() {
      console.log("选择了其他公司");
      this.value = "";
      // console.log(this.value);
      console.log(this.stockName);
      this.options = this.stockName;
    },
    a() {
      console.log("选择了一个仓库");
      this.$emit("searchCard");
      this.company_name = this.companyName;
      // console.log(this.companyName);
      // console.log(this.company_name);
      // console.log(this.value);
    },
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;

        console.log(this.options);
        // setTimeout(() => {
        //   this.loading = false;
        //   this.options = this.list.filter((item) => {
        //     return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        //   });
        // }, 200);
      } else {
        this.options = [];
      }
    },
  },
};
</script>

<style>
</style>