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

最新推荐文章于 2025-10-28 14:18:37 发布

原创最新推荐文章于 2025-10-28 14:18:37 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #view design #javascript #前端

开发专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个基于Vue2和ViewDesign的姓名模糊查询组件，该组件通过输入姓名动态显示匹配的名字列表，并允许用户选择。文章提供了组件的实现代码。

实现的效果如图输入名字，动态模糊查找名字展示相关名字的表格列表，选择名字后则关闭表格
请添加图片描述
一开始本来打算用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>