ビュー デザイン コンポーネントは、Vue+Input+Table を使用して値を動的に検索し、単一の項目を選択します

効果は図の通りです 名前を入力すると動的に名前をあいまい検索して関連する名前のテーブル一覧を表示します 名前を選択するとテーブルが閉じます 当初はselectを使って実装する予定でし

たレンダリングされたテーブルは操作と選択が難しいことが判明しました。最終的には、入力を使用する方が便利でした。簡潔に、以下のカプセル化の一般的なコードが使用され
ます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>