Le composant de conception de vue utilise Vue+Input+Table pour rechercher dynamiquement des valeurs et sélectionner des éléments uniques

L'effet est comme le montre la figure. Entrez le nom, recherchez dynamiquement le nom et affichez la liste des noms associés dans la table. Après avoir sélectionné le nom, la table sera fermée. Au début, j'avais prévu d'utiliser select pour l'implémenter

. Il s'est avéré que la table rendue était difficile à utiliser et à sélectionner. En fin de compte, il était plus pratique d'utiliser l'entrée. , concis, le code général de l'encapsulation ci-dessous
est utilisé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>