order-ui-pc/src/views/stock/allot/components/companySearch.vue

<template>
  <div class="companySearch" style="width: 200px; display: inline-block">
    <div class="block" style="width: 100%">
      <!-- <el-cascader
        style="width: 400px"
        :options="options"
        v-model="value"
        collapse-tags
        :props="{ multiple: true, checkStrictly: false }"
        clearable
        filterable
        @change="a"
      ></el-cascader> -->
      <el-select
        :size="searchSize"
        v-model="value"
        :multiple="false"
        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>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      options: [],
      value: [],
      list: [],
      states: [],
      children: [],
    };
  },
  mounted() {
    this.list = this.states.map((item) => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  },
  computed: {
    ...mapGetters(["searchSize"]),
  },
  props: ["options"],
  methods: {
    a() {
      console.log("选择了一个公司");
      console.log(this.value);
      // console.log(this.list);
      console.log(this.options);
      this.$emit("searchCard", this.value);
      this.options.forEach((element) => {
        // console.log(element);
        if (element.value === this.value) {
          console.log(element.label);
          console.log(element.children);
          this.children = element.children;
          this.$emit("stock", this.children);
        }
      });
    },

    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        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>