The view-design component uses Vue+Input+Table to dynamically search for values and select single items

The effect is as shown in the figure. Enter the name, dynamically fuzzy search the name and display the table list of related names. After selecting the name, the table will be closed. At first, I

planned to use select to implement it. It turned out that the rendered table was difficult to operate and select. In the end, it was more convenient to use input. , concise, the general code of the encapsulation below
is usedVue2+View Design

<template>
  <div class="select-name">
    <FormItem label="姓名">
      <Input
        @on-change="nameRemoteMethod"
        placeholder="请输入姓名"
        clearable
        v-model="name"
        class="input"
      />
      <Table
        class="my-table"
        height="200"
        :id="nameId"
        :columns="tableColumns"
        :data="nameData"
        @on-row-click="changeSelData"
      />
    </FormItem>
  </div>
</template>

<script>
/**
 * 驾驶员模糊查询
 */
import {
    
     post} from "@/api";
export default {
    
    
  name: "SelectName",
  data() {
    
    
    return {
    
    
      name: "",
      nameData: [],
      tableColumns: [
        {
    
    
           title: "姓名",
           key: "name",
           align: "center"
        },
        {
    
    
           title: "学号",
           key: "no",
           align: "center"
         },
         {
    
    
           title: "状态",
           key: "isactive",
           align: "center",
           render: (h, params) => {
    
    
             if (params.isactive == "0") {
    
    
             return h("span", "注销");
             } else {
    
    
             return h("span", "正常");
             }
           }
         }
        ]
    };
  },
  props: {
    
    
    //一个页面多个人员输入框，唯一id
    nameId: {
    
    
      type: String,
      default: "selectName"
    }
  },
  methods: {
    
    
    //选择姓名后将值传给父组件 并隐藏表格
    changeSelData(val) {
    
    
      this.name= val.name;
      let obj = {
    
    
        name: val.name, //姓名
        no: val.no, //学号
      };
      this.$emit("selNameInfo", obj);

      this.changeTableStyle("none");
    },
    //远程搜索
    async nameRemoteMethod() {
    
    
      if (
        typeof this.name== "undefined" ||
        typeof this.name== "null" ||
        this.name.length == 0
      ) {
    
    
        let obj = {
    
    
          name: "",
          no: "",  //学号
        };
        this.$emit("selNameInfo", obj);
        this.nameData = [];
        this.changeTableStyle("none");
        return;
      }

      this.changeTableStyle("block");
      let params = {
    
    
        queryName: this.name,
      }; //参数
      await post(//请求的接口, params).then((res) => {
    
    
        if (res.success && res.data.length > 0) {
    
    
          this.nameData = res.data;
        } else {
    
    
          this.nameData = [];
        }
      });
    },
    //动态显示或者隐藏table
    changeTableStyle(status) {
    
    
      let selectTable = document.getElementById(`${
      
      this.nameId}`);
      selectTable.style.display = status;
    }
  }
};
</script>

<style lang='less'>
.select-name {
    
    
  .input {
    
    
    position: relative;
  }
  .my-table {
    
    
    position: absolute;
    display: none;
    width: 100%;
    z-index: 999;
  }
}
</style>