view-design组件使用Vue+Input+Table实现动态搜索值并单选

实现的效果如图输入名字，动态模糊查找名字展示相关名字的表格列表，选择名字后则关闭表格

一开始本来打算用select来实现，结果发现渲染的表格不好操作选择，最后使用了input更方便、简洁，下面上封装的大致代码
使用的是Vue2+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>