输入框下拉表格组件

<template>
  <div
    v-if="dictionaryFlag"
    :style="{
      top: siteObj.top + 'px',
      left: siteObj.left + 'px',
      width: widthNumber + 'px',
    }"
    style="z-index: 9999999; position: absolute; background: #fff"
  >
    <MyTables
      ref="trees"
      :loading="loading"
      :table-data="macyList"
      :columns="columns"
      :height="searchTableHeight"
      :highlightCurrentRow="true"
      @cellClick="handleCellClick"
    ></MyTables>
  </div>
</template>

<script>
export default {
  data() {
    return {
      macyList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        stopFlag: 0,
      },
      loading: false,
    };
  },
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    widthNumber: {
      type: Number,
      default: 700,
    },
    searchTableHeight: {
      type: Number,
      default: 250,
    },
    dictionaryFlag: {
      type: Boolean,
      default: false,
    },
    api: Function,
    parsms: Object,
    values: String || Number,
    siteObj: {
      type: Object,
      default: () => {
        return { top: "", left: "" };
      },
    },
  },
  watch: {
    dictionaryFlag: {
      handler(val) {
        if (val == true) {
          this.getList();
        } else {
          this.macyList = [];
        }
      },
      immediate: true,
    },
    values: {
      handler(val) {
        this.queryParams.name = val;
        this.getList();
      },
      immediate: true,
    },
  },
  methods: {
    getList() {
      const params = {
        ...this.parsms,
        ...this.queryParams,
      };
      this.loading = true;
      this.api(params).then((response) => {
        this.loading = false;
        this.macyList = response.data.records;
      });
    },
    handleCellClick(row) {
      this.$emit("add", row);
      this.row = row;
    },
  },
};
</script>