toast.js

import Vue from "vue";
import Toast from "@/components/showDropTable"; //引入组件
let ToastConstract = Vue.extend(Toast); //扩展一个toast实例构造器
function toastShow() {
  let toastDom = new ToastConstract(); //new实例化一个对象
  toastDom.$mount(document.createElement("div")); //挂载到某一元素上，这里挂载到div上
  document.body.appendChild(toastDom.$el); //将div中包裹的toast元素内容添加到body上
  Vue.prototype.$toast = toastDom; //挂载到vue原型链上
  // 这样就可以在所有 vue 的实例里面使用 this.$toast，调用 this.$toast.showToast(text,duration)
}
export default toastShow;

showDropTable.vue

<template>
  <transition name="el-zoom-in-top" ref="ref">
    <div
      v-show="showTable"
      class="show-table"
      :style="tablew"
      ref="tableRef"
      :class="{ 'show-left': isLeft, 'show-right': isRight }"
    >
      <div class="popper-arrow"></div>
      <el-button
        type="primary"
        class="common-btn btn-dynamic-effect"
        @click="confirmMulti"
        v-if="tmpdata.isconfirmMulti"
        >确认多选</el-button
      >
      <el-table
        :data="splitData"
        highlight-current-row
        fit
        @select="selected"
        @row-click="rowClick"
        border
        ref="table"
        max-height="268px"
      >
        <el-table-column type="selection" v-if="tmpdata.isconfirmMulti"></el-table-column>
        <el-table-column
          v-for="(item, index) in activeColumnData"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.width"
        >
          <template slot-scope="{ row, column }">
            <div
              v-if="item.tubeColor"
              style="height: 20px; color: #fff; text-align: center;"
              :style="{ 'background-color': row[item.prop] }"
            >
              <span style="color: black;">{{ row[item.prop] }}</span>
            </div>

            <div v-else-if="item.check">
              <el-checkbox
                v-model="row[item.prop]"
                disabled
                :true-label="item.trueLabel"
                :false-label="item.falseLabel"
              ></el-checkbox>
            </div>

            <div v-else-if="item.fontColor">
              <span :style="{ color: row.displayColor }">{{ row[item.prop] }}</span>
            </div>
            <div v-else>{{ row[column.property] }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </transition>
</template>

<script>
import { proData } from "@/utils/processData";
import setPosition from "@/utils/setPosition";

export default {
  components: {},
  props: {},
  data() {
    return {
      inputRef: "",
      iDom: "",
      showTable: false,
      isLeft: false,
      isRight: false,
      editProp: "",
      valueProp: "",
      tableWidth: "",
      inputWidth: "",
      tmpdata: {
        tableData: {
          columdData: [],
          data: []
        }
      },
      dataDuplicate: [],
      obj: [],
      uid: "",
      isid: "",
      tableHeight: 0,
      activeColumnData: [],
      sliceData: [],
      splitData: [],
      columnData: [],
      startIndex: 0,
      tableLabel: "",
      highlightCurrentRow: undefined,
      tableDom: {}, // 当前弹窗列表
      windowHeight: 0, // 当前可视区的高度
      scrollHeight: 0, // 滚动区域的总高度
      setTimeId: null
    };
  },
  watch: {

  },
  computed: {
    inputw() {
      if (this.inputWidth) {
        if (this.inputWidth.indexOf("%") !== -1) {
          return `width:${this.inputWidth} `;
        } else return `width:${+this.inputWidth - 16}px `;
      } else {
        return `width:98%`;
      }
    },
    tablew() {
      if (this.tableWidth) {
        if (this.tableWidth.indexOf("%") !== -1) {
          return `width:${this.tableWidth} `;
        } else return `width:${+this.tableWidth}px `;
      } else {
        return `width:100% `;
      }
    }

  },
  methods: {
    /** keydown */
    keydown(data) {
      const keyCodeS = {
        up: 38, // 上
        down: 40, // 下
        enter: 13 // enter
      };
      const { keyCode } = data;
      if (keyCode === keyCodeS.up) {
        this.toggleHight("up");
        data.preventDefault();
      } else if (keyCode === keyCodeS.down) {
        this.toggleHight("down");
        data.preventDefault();
      } else if (keyCode === keyCodeS.enter) {
        // enter 抛出当前高亮行 数据

        const highlightCurrentRow = this.highlightCurrentRow;
        if (this.showTable) {
          // 弹窗打开滚动条回到顶部
          this.scrollTopInit();
          if (highlightCurrentRow) {
            this.showTable = false;
            this.$EventBus.$emit("fg_drop_table_changeValue", {
              val: highlightCurrentRow[this.valueProp],
              id: this.uid
            });
            if (this.editProp) {
              this.$EventBus.$emit("fg_drop_table_changeEdit", {
                val: highlightCurrentRow[this.editProp],
                id: this.uid
              });
            } else {
              this.$EventBus.$emit("fg_drop_table_changeEdit", { val: highlightCurrentRow[this.obj[0]], id: this.uid });
            }
            this.highlightCurrentRow = undefined;
          }
        }
      }
    },
    /** 切换高亮行 */
    toggleHight(arrow) {
      const splitData = this.splitData;
      const highlightCurrentRow = this.highlightCurrentRow;
      if (highlightCurrentRow) {
        let highlightCurrentRowIndex = -1;
        const ret = splitData.find((obj, index) => {
          if (obj[this.valueProp] === highlightCurrentRow[this.valueProp]) {
            highlightCurrentRowIndex = index;
            return true;
          }
        });
        if (ret) {
          let nextRow = {};
          let nextRowIndex = {};
          const len = splitData.length;
          if (arrow === "up") {
            if (highlightCurrentRowIndex === 0) {
              nextRowIndex = len - 1;
            } else {
              nextRowIndex = highlightCurrentRowIndex - 1;
            }

            // 滚动条跟随按键滚动
            this.scrollForKeyCodeEvent(nextRowIndex, "up");
          } else if (arrow === "down") {
            if (highlightCurrentRowIndex === len - 1) {
              nextRowIndex = 0;
            } else {
              nextRowIndex = highlightCurrentRowIndex + 1;
            }

            // 滚动条跟随按键滚动
            this.scrollForKeyCodeEvent(nextRowIndex, "down", len - 1);
          }
          nextRow = splitData[nextRowIndex];
          this.highlightCurrentRow = nextRow;
          this.setCurrent(nextRow);
        } else {
          this.setFirstHL(splitData[0]);
        }
      } else {
        // const currentRow = splitData[0]
        this.setFirstHL(splitData[0]);
        // this.highlightCurrentRow = currentRow
        // this.setCurrent(currentRow)
      }
    },
    /** 比较为空时，设置第一个高亮 */
    setFirstHL(currentRow) {
      this.highlightCurrentRow = currentRow;
      this.setCurrent(currentRow);
    },
    /** 设置高亮行 */
    setCurrent(row) {
      this.$refs.table.setCurrentRow(row);
    },
    // 滚动条跟随上下滚动
    scrollForKeyCodeEvent(index, path, length) {
      const _index = index || 0;
      const _len = length || this.splitData.length - 1 || 0;
      const DOWN = "down"; // 按键事件名
      const UP = "up"; // 按键事件名
      const H = 37; // 表格行高
      // （index * 行高）大于内容高度减去一个行则滚动滚动条;反向是小于上面卷起的高度则滚动滚动条;
      // 最底部
      if (_index == 0) {
        this.tableDom.scrollTop = 0;
      }
      // 最顶部
      if (_index == _len) {
        this.tableDom.scrollTop = this.scrollHeight - this.windowHeight;
      }
      switch (path) {
        case DOWN:
          if (_index * H > this.windowHeight - H) {
            this.tableDom.scrollTop = Number(this.tableDom.scrollTop) + H;
          }
          break;
        case UP:
          if (_index * H < this.scrollHeight - this.windowHeight) {
            this.tableDom.scrollTop = Number(this.tableDom.scrollTop) - H;
          }
          break;
        default:
          console.log("无操作");
      }
    },
    //打开table事件
    showToast(
      uid,
      input,
      iDom,
      gridEdit,
      tableWidth,
      inputWidth,
      columnData,
      editProp,
      valueProp,
      isconfirmMulti,
      check
    ) {
      if (this.uid === uid && gridEdit.length > 0 && this.sliceData.length > 0) {
        this.showTable = !this.showTable;
        this.setTablePosition(input);
        this.tmpdata = proData(gridEdit, columnData, isconfirmMulti);
        this.sliceData = JSON.parse(JSON.stringify(this.tmpdata.tableData.data));
        this.activeColumnData = this.tmpdata.tableData.columnData.filter((p) => {
          return !p.visable;
        });
        if (this.sliceData.length > 100) {
          this.splitData = this.sliceData.slice(0, 50);
        } else {
          this.splitData = this.sliceData;
        }
        return;
      } else {
        this.splitData = [];
        this.activeColumnData = [];
        this.uid = uid;
      }
      // this.uid = uid;
      this.columnData = columnData;
      this.tableHeight = this.calcTableHeight(gridEdit);
      this.editProp = editProp;
      this.valueProp = valueProp;
      this.inputRef = input;
      this.iDom = iDom;
      this.tableWidth = tableWidth ? tableWidth : (inputWidth - 16).toString();
      this.inputWidth = inputWidth;
      this.setTablePosition(input);
      if (gridEdit.length !== 0 && columnData.length !== 0) {
        this.tmpdata = proData(gridEdit, columnData, isconfirmMulti);
        this.sliceData = JSON.parse(JSON.stringify(this.tmpdata.tableData.data));
        if (this.sliceData.length > 100) {
          this.splitData = this.sliceData.slice(0, 50);
        } else {
          this.splitData = this.sliceData;
        }
        this.activeColumnData = this.tmpdata.tableData.columnData.filter((p) => {
          return !p.visable;
        });
      } else {
        //this.$message.error("下拉框数据为空!");
        this.showTable = !this.showTable;
        this.tmpdata = proData(gridEdit, columnData, isconfirmMulti);
        return;
      }
      this.showTable = !this.showTable;
      this.check = check;
      this.dataDuplicate = JSON.parse(JSON.stringify(this.tmpdata.tableData.data));
      this.obj = Object.getOwnPropertyNames(this.dataDuplicate[0]);
      this.obj.splice(this.obj.length - 1, 1);
    },
    //计算高度
    calcTableHeight(data) {
      return (data.length + 1) * 36 + 20;
    },
    //定位
    setTablePosition(input) {
      const position = setPosition(input);
      const bodyWidth = document.body.clientWidth;
      const bodyHeight = document.body.clientHeight;
      const table = this.$refs.tableRef;

      if (this.tableHeight > 300) {
        this.tableHeight = 300;
      }

      if (bodyHeight - position.top < this.tableHeight) {
        if (position.top < this.tableHeight) {
          table.style.top = `${position.top - this.tableHeight / 2}px`;
        } else {
          table.style.top = `${position.top - this.tableHeight}px`;
        }
      } else {
        table.style.top = `${position.top + 30}px`;
      }
      table.style.left = position.left + "px";
      if (this.tableWidth) {
        if (bodyWidth - position.left <= +this.tableWidth + 100) {
          table.style.left = `${position.left - this.tableWidth + 100}px`;
          this.isRight = true;
        }
      } else if (this.inputWidth) {
        if (bodyWidth - position.left <= +this.inputWidth + 100) {
          table.style.left = `${position.left - this.inputWidth + 100}px`;
          this.isRight = true;
        }
      }
    },
  

    //多选事件
    selected(row) {
      const arr = [];
      this.strs = [];
      arr.push(...row);
      arr.forEach((p) => {
        this.strs.push(p.value);
      });
    },
    //点击表格事件
    rowClick(row) {
      if (this.tmpdata.tableData.data && this.tmpdata.tableData.data.length > 0) {
        this.showTable = false;
        this.$EventBus.$emit("fg_drop_table_changeReverse", { val: false, id: this.uid });
        if (this.editProp) {
          this.$EventBus.$emit("fg_drop_table_changeEdit", { val: row[this.editProp], id: this.uid });
        } else {
          this.$EventBus.$emit("fg_drop_table_changeEdit", { val: row[this.obj[0]], id: this.uid });
        }
        if (this.valueProp) {
          this.$EventBus.$emit("fg_drop_table_changeValue", { val: row[this.valueProp], id: this.uid });
        } else {
          this.$EventBus.$emit("fg_drop_table_changeValue", { val: row[this.obj[0]], id: this.uid });
        }
      }
    },
    //过滤
    filterTableData(val) {
      const arrays = [];
      this.tableLabel = val;
      if (val != "" && val != undefined) {
        arrays.push(
          ...this.dataDuplicate.filter((p) => {
            for (const key of this.obj) {
              if (p[key]) {
                if (p[key].toString().toUpperCase().indexOf(val.toUpperCase()) != -1) {
                  return true;
                }
              }
            }
          })
        );
        return arrays;
      } else return this.dataDuplicate;
    },
    handleClose(event) {
      if (event.target === this.inputRef || event.target === this.iDom) {
        return;
      } else if (!this.$refs.tableRef.contains(event.target)) {
        this.showTable = false;
        this.$EventBus.$emit("fg_drop_table_exitTable");
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.$refs.table.bodyWrapper.scrollLeft = 0;
      }
    },
    getFocusAndInitHeight() {
      this.setTimeId && clearTimeout(this.setTimeId);
      // this.tableDom = this.$refs.table.bodyWrapper;
      this.setTimeId = setTimeout(() => {
        this.tableDom = document.querySelector(".show-table .el-table__body-wrapper");
        this.tableDom.focus();
        if (this.tableDom["scrollTop"]) this.tableDom["scrollTop"] = 0;
        // 可视高度
        this.windowHeight = this.tableDom.clientHeight || 0;
        // 滚动条的总高度
        this.scrollHeight = this.tableDom.scrollHeight || 0;
      });
    },
    scrollTopInit() {
      this.$nextTick(() => {
        if (this.tableDom["scrollTop"]) this.tableDom["scrollTop"] = 0;
      });
    }
  },
  created() {},
  mounted() {
    //添加body点击事件 点击body时table隐藏
    document.body.addEventListener("click", this.handleClose, true);
    //接收筛选事件
    this.$EventBus.$on("fg_drop_table_filterTable", (val) => {
   
      this.splitData = [];
      const data = this.filterTableData(val);
    
      this.splitData = data;
      
    });
    //接收远程搜索事件
    this.$EventBus.$on("fg_drop_table_filterTable_remote", (data) => {
      this.splitData = data;
    });
    this.$EventBus.$on("fg_drop_table_exitTable", () => {
      this.showTable = false;
      this.$refs.table.bodyWrapper.scrollTop = 0;
    });
    this.$EventBus.$on("fg_drop_table_showtab", () => {
      if (this.showTable) {
        return;
      }
      this.showTable = true;
    });
    this.$refs.table.bodyWrapper.addEventListener("scroll", () => {
      const dom = this.$refs.table.bodyWrapper;
      const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
      if (scrollDistance <= 0) {
        //等于0证明已经到底 推送消息回去
        this.$EventBus.$emit("fg_drop_table_scrollInterface");
      }
    });

    // 上下切换事件
    document.addEventListener("keydown", this.keydown);
    this.getFocusAndInitHeight();
  },
  beforeDestroy() {
    //解绑
    document.body.removeEventListener("click", this.handleClose, true);
    this.$refs.table.bodyWrapper.removeEventListener("scroll");
    document.removeEventListener("keydown", this.keydown);
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/restTheme/mixin";
.show-table {
  cursor: pointer;
  z-index: 4000;
  position: absolute;
  top: 30px;
  white-space: nowrap;
  padding: 10px 7px;
  margin: 5px 0;
  background-color: #ffffff;
  border: $div-border;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  max-height: 300px;
  // overflow: auto;
  .el-button {
    padding: 0 20px;
    margin: 0 0 10px 0;
  }
  .el-table {
    width: 100%;
    border-radius: 4px;
    border-bottom: 0;
  }


  //table头部字体样式
  ::v-deep .has-gutter {
    background: #e8eaf3;
    border-radius: 2px 2px 0 0;
    height: 20px;
    .cell {
      font-size: 12px;
      color: #444444;
      letter-spacing: -0.34px;
      text-overflow: clip !important;
      white-space: nowrap !important;
      min-width: 50px;
      box-sizing: border-box;
      overflow: hidden;
      word-break: break-all !important;
      line-height: 23px;
      padding-left: 10px;
      padding-right: 10px;
    }
  }

  ::v-deep .el-table--mini th,
  ::v-deep .el-table--mini td {
    padding: 1px 0 !important;
  }
  // 超出表格单元截断
  ::v-deep.el-table .cell {
    text-overflow: clip !important;
    white-space: nowrap !important;
    min-width: 50px;
    box-sizing: border-box;
    overflow: hidden;
    word-break: break-all !important;
    line-height: 23px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .popper-arrow {
    display: block;
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #ebeef5 transparent;
    position: absolute;
    top: -12px;
    left: 20px;
  }
  .popper-arrow::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    top: -4px;
    left: -6px;
  }


  transform-origin: center top;
}

.show-left {
  left: 30px;
}
</style>

FgRIGridLookUpEdit.vue

<template>
  <!-- lzsadd  2020/6/19  下拉框显示table组件  使用方法在README.md中 添加选择-->

  <!--
   Attributes
   数据源格式:
inputWidth tableWidth tableData data columnData 为固定值
queryData: 远程搜索（类型为请求方法）
gridEdit: {
inputWidth: "width:160px;", //下拉框宽度 高度固定为 26px
tableWidth: "width:856px;", //下拉框显示的 table 宽度
isconfirmMulti: false, //是否需要多选
inputData: "", //input 数据源
isDisableEnterEvent: false, // 是否禁用 原来的 enter 事件
tableData: {
data: [ //table 数据源
{
prop1: "hello1",
prop2: "hello2"
},
{
prop1: "hello5",
prop2: "hello7"
},
{
prop1: "hello5",
prop2: "hello7"
},
{
prop1: "hello5",
prop2: "hello7"
},
{
prop1: "hello5",
prop2: "hello7"
}
],
columnData: [ //列名数据源
{
prop: "prop1",
label: "血液",
width: "100%"
},
{
prop: "prop2",
label: "血小板",
width: "100%"
},
{
prop: "prop2",
label: "血小板",
width: "100%"
}
]
}
},

Events(事件)
change  点击表格行触发 回调参数（tableValue， row：object）

methods:
showTable 显示table

数据源传递方式:prop
双击列表行赋值给 input, 赋值第一个字段
组件使用问题希望大家多反馈 一起找下 bug 或者修改下样式 -->

  <div
    class="grid-edit"
    ref="refGridEdit"
    :class="{ 'is-disabled': disabled }"
    @mouseover="isHover = true"
    @mouseleave="isHover = false"
  >
    <!-- @keyup.enter.native="filterData" -->
    <el-input
      :style="inputw"
      v-model="tableLabel"
      @click.native="showTable"
      ref="inputRef"
      @change="checkData"
      @focus="inputFocus"
      :placeholder="placeholder"
      :disabled="disabled"
      @keyup.enter.native="enterEvent"
      @input="showTableFun"
      @blur="inputBlur"
    ></el-input>
    <i
      v-show="!isHover"
      @click="showTable"
      class="el-select__caret el-icon-arrow-up"
      :class="{ 'is-reverse': reverse }"
      ref="iRef"
    />
    <i
      v-show="isHover"
      @click="clearInput"
      class="el-select__caret el-icon-circle-close"
      :class="{ 'is-reverse': reverse }"
      ref="iRef"
    />
  </div>
</template>

<script>
import Toast from "@/utils/toast";
import Vue from "vue";
import _ from "lodash";
import { debounce } from "@/utils/lodash";
import { waitTime } from "@/utils/config";

export default {
  name: "FgRIGridLookUpEdit",
  components: {},
  props: {
    //placeholder
    // placeholder: {
    //   type: String,
    //   required: false,
    //   default: "请选择"
    // },
    // 不设置 Placeholder 逻辑
    noPlaceholder: {
      type: Boolean,
      default: false
    },
    //数据源
    gridEdit: {
      type: Array,
      required: true
    },
    //column数据源
    columnData: {
      type: Array,
      required: true
    },
    // input宽度
    inputWidth: {
      type: String,
      required: false
    },
    //table宽度
    tableWidth: {
      type: String,
      required: false
    },
    //input显示的prop名
    editProp: {
      type: String,
      required: false
    },
    valueProp: {
      type: String,
      required: false
    },
    //是否多选
    isconfirmMulti: {
      type: Boolean,
      required: false
    },
    checked: {
      type: String,
      required: false
    },
    //disable
    disabled: {
      type: Boolean,
      default: false,
      required: false
    },
    //v-model双向绑定
    value: {
      type: String,
      required: false
    },
    /** 用于远程搜索 */
    queryData: {
      type: Function
    },
    /** 是否禁用原来的enter 事件 */
    isDisableEnterEvent: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      isHover: false,
      reverse: false,
      el_icon: "el-icon-arrow-up",
      strs: [],
      isFlip: false,
      isLeft: false,
      isRight: false,
      tmpdata: {
        tableData: {
          columdData: [],
          data: []
        }
      },
      placeholder: "请选择",
      tableLabel: "",
      tableValue: "",
      uid: "",
      keyValue: {},
      /** 远程选择的表格数据 */
      queryDataList: []
    };
  },
  watch: {

    gridEdit: {
      handler(data) {
        data.forEach((p) => {
          this.keyValue[p[this.valueProp]] = p[this.editProp];
        });
        //若先拿到tablevalue
        if (this.tableValue) {
          this.tableLabel = this.keyValue[this.tableValue];
        }
      },
      immediate: true
    },
    value: {
      handler(val) {
        this.tableValue = val;
        this.tableLabel = this.keyValue[val];
      },
      immediate: true
    },
    //监听myValue，如果子组件中的内容变化了，通知父级组件，将新的值告诉父级组件，我更新了，父级组件接受到值后页就跟着变了
    tableValue(val) {
      this.$emit("input", val);
   
    },
    tableLabel(val) {
      if (val === "") {
        this.$emit("change", "");
        this.tableValue = "";
      }
    
    }
  },
  computed: {
    inputw() {
      if (this.inputWidth) {
        if (this.inputWidth.indexOf("%") !== -1) {
          return `width:${this.inputWidth} `;
        } else return `width:${+this.inputWidth - 16}px `;
      } else {
        return `width:98%`;
      }
    },
    tablew() {
      if (this.tableWidth) {
        if (this.tableWidth.indexOf("%") !== -1) {
          return `width:${this.tableWidth} `;
        } else return `width:${+this.tableWidth}px `;
      } else {
        return `width:100% `;
      }
    }

  },
  methods: {
    showTableFun() {
      // this.$EventBus.$emit("fg_drop_table_showtab");
      // 判断子组件table是否展示
      if (!this.$toast.showTable) {
        this.showTable();
      }
      // 20210222 用于门诊用药
      if (this.queryData) {
        this.filterData();
      }
    },
    inputFocus() {
      // this.showTable()
      if (!this.noPlaceholder) {
        this.placeholder = this.tableLabel;
        this.tableLabel = "";
      }
    },
    /** enterEvent enter 事件*/
    enterEvent() {
      if (!this.isDisableEnterEvent) {
        this.filterData();
      }
      if (this.isDisableEnterEvent) {
        this.showTable();
      }
    },
    filterData() {
      // this.$EventBus.$emit("fg_drop_table_filterTable", this.tableLabel);
      if (this.queryData) {
        this.debounceQuery();
      } else {
        this.$EventBus.$emit("fg_drop_table_filterTable", this.tableLabel);
      }
    },
    debounceQuery: _.debounce(async function () {
      const ret = await this.queryData(this.tableLabel);
      this.queryDataList = ret;
      this.$EventBus.$emit("fg_drop_table_filterTable_remote", ret);
    }, waitTime),
    debounceQuery1: debounce(async function () {
      const ret = await this.queryData(this.tableLabel);
      this.queryDataList = ret;
      this.$EventBus.$emit("fg_drop_table_filterTable_remote", ret);
    }, waitTime),
    checkThrottle(type = 1) {
      switch (type) {
        case 1:
          this.debounceQuery();
          break;
        case 2:
          this.debounceQuery1();
          break;
        default:
          this.debounceQuery();
      }
    },
    //点击删除事件
    clearInput() {
      this.tableLabel = "";
      this.tableValue = "";

      if (!this.noPlaceholder) {
        this.placeholder = " 请选择";
      }
      this.$emit("clearRow");
      this.$EventBus.$emit("FgClearInput");
    },
    //点击input打开table事件
    showTable() {
      if (this.disabled) {
        return;
      }
      Vue.use(Toast);
      const input = this.$refs.inputRef.$refs.input;
      const iDom = this.$refs.iRef;

      // isNotShowSelect: true 不显示到列表中
      const gridEdit = this.gridEdit.filter(a=>!a.isNotShowSelect)

      this.$toast.showToast(
        this.uid,
        input,
        iDom,
        gridEdit,
        this.tableWidth,
        this.inputWidth,
        this.columnData,
        this.editProp,
        this.valueProp,
        this.isconfirmMulti
      );
 
      this.reverse = !this.reverse;
      this.$refs.refGridEdit.style.borderColor = "#1D85E5";
    },
    handleClose(event) {
      if (!this.$refs) {
        return;
      }
      const iDom = this.$refs.iRef;
      const inputDom = this.$refs.inputRef.$refs.input;
      if (event.target === inputDom || event.target === iDom) {
        return;
      }
    },

    checkData() {
      //数据检查
      //this.$toast.checkData(val);
    },
    initGrid() {
      this.gridEdit.forEach((p) => {
        this.keyValue[p[this.valueProp]] = p[this.editProp];
      });
    },
    // 用户输入失焦
    inputBlur() {
      this.$emit("blur", this.tableLabel);
      if (!this.noPlaceholder) {
        this.tableLabel = this.placeholder; //失去焦点，清空input输入的内容
        this.placeholder = "";
      }
    }
  },
  created() {
    this.initGrid();
  },
  mounted() {

    // //绑定事件点击外部关闭弹窗
    this.initGrid();
    //添加body点击事件 点击body时table隐藏
    document.body.addEventListener("click", this.handleClose, false);

    this.uid = this.$refs.inputRef._uid;
    this.$EventBus.$on("fg_drop_table_changeEdit", (obj) => {
      if (this.uid === obj.id) {
        if (!this.noPlaceholder) {
          this.placeholder = obj.val;
        }

        this.tableLabel = obj.val;
      }
    });
    this.$EventBus.$on("fg_drop_table_changeValue", (obj) => {
      if (this.uid === obj.id) {
        // console.log('fg_drop_table_changeValue 22', obj)
        // console.log('fg_drop_table_changeValue 22', this.queryDataList)
        // this.tableValue = obj.val;
        // let chooseRow = {}
        // if (this.queryDataList.length > 0) {
        //   chooseRow = this.queryDataList.find(item => item[this.valueProp] === obj.val);

        //   if (chooseRow) {
        //     this.tableValue = chooseRow[this.editProp];
        //     this.tableLabel = chooseRow[this.editProp];
        //     this.$emit("change", this.tableValue, chooseRow);
        //   }
        // } else {
        //   chooseRow = this.gridEdit.find(item => item[this.valueProp] === obj.val);
        //   this.$emit("change", this.tableValue, chooseRow);
        // }
        let chooseRow;
        if (this.queryDataList.length > 0) {
          chooseRow = this.queryDataList.find((item) => item[this.valueProp] === obj.val);
        }
        if (!chooseRow) {
          chooseRow = this.gridEdit.find((item) => item[this.valueProp] === obj.val);
        }
        if (chooseRow) {
          this.tableValue = obj.val;
        }
        this.$emit("change", this.tableValue, chooseRow);
      }
    });
    this.$EventBus.$on("fg_drop_table_exitTable", () => {
      this.reverse = false;
      if (this.$refs.refGridEdit) {
        this.$refs.refGridEdit.style.borderColor = "#DCDFE6";
      }
    });
    this.$EventBus.$on("fg_drop_table_changeReverse", (obj) => {
      if (this.uid === obj.id) {
        this.reverse = obj.val;
        if (this.$refs.refGridEdit) {
          this.$refs.refGridEdit.style.borderColor = "#DCDFE6";
        }
      }
    });
    this.$EventBus.$on("fg_drop_table_clearInput", () => {
      this.tableLabel = "";
    });
    this.$EventBus.$on("fg_drop_table_scrollInterface", () => {
      this.$emit("scrollInterface");
    });
  },
  beforeDestroy() {
    //解绑
    document.body.removeEventListener("click", this.handleClose, false);
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/restTheme/mixin.scss";

.grid-edit {
  cursor: pointer !important;
  display: inline-flex;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 30px !important;
  background: #fff !important;
  align-items: center;
  .el-select__caret {
    color: #c0c4cc;
    position: relative;
    height: 14px;
    right: 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    transition: transform 0.3s;
    transform: rotateZ(180deg);
  }
  ::v-deep.el-input__inner,
  .el-input {
    cursor: pointer;
    border: 0;
    display: flex;
    align-items: center;
    height: 28px !important;
    line-height: 1;
  }
  .el-select__caret.is-reverse {
    transform: rotateZ(0deg);
  }

  .show-table {
    z-index: 4000;
    position: absolute;
    top: 30px;
    //z-index: 10;
    padding: 10px 7px 10px 7px;
    margin: 5px 0;
    background-color: #ffffff;
    border: $div-border;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 300px;
    max-height: 600px;
    overflow: auto;
    .el-button {
      padding: 0 20px;
      margin: 0 0 10px 0;
    }
    .el-table {
      width: 100%;
      border-radius: 4px;
      border-bottom: 0;
    }
    .popper-arrow {
      top: -10px;
      left: 50%;
      margin-right: 3px;
      border-top-width: 0;
      border: 10px solid #fff;
      border-top: 0;
      border-right-color: transparent;
      border-left-color: transparent;
      position: absolute;
      left: 10px;
    }
    .popper-arrow::after {
      top: 1px;
      margin-left: -6px;
      border-top-width: 0;
      border-bottom-color: #ffffff;
    }
    transform-origin: center top;
  }

  .show-flip {
    top: -310px;
  }
  .show-left {
    left: 30px;
  }

}
.is-disabled {
  background: #f5f7fa !important;
}
</style>