El componente de diseño de vistas utiliza Vue+Input+Table para buscar valores dinámicamente y seleccionar elementos individuales.

El efecto es como se muestra en la figura. Ingrese el nombre, realice una búsqueda difusa dinámica del nombre y muestre la lista de la tabla de nombres relacionados. Después de seleccionar el nombre, la tabla se cerrará. Al principio, planeé usar select para implementarlo

. Resultó que la tabla renderizada era difícil de operar y seleccionar. Al final, fue más conveniente usar la entrada. , conciso, se
usa el código general encapsulado a continuación.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>