vue3 antdv Select 实现输入关键词,通过服务器去查询数据,并显示到表格中的实现思路。

实现思路:

1)输入关键词,通过Select的查询事件(onSearch)来到服务器查询数据。

2)根据查询到的数据显示到表格中,然后通过表格的(cellClickEvent)事件来选择相关的用户。

3)如果没有查询到,那么点击底部的增加(onAddInfo),弹出框来增加。

4)弹框中增加到服务器后,通过服务器返回的id,及输入的用户名,电话,直接赋值到界面。

1、先上一个效果图:

2、实现

Ant Design Vue --- An enterprise-class UI components based on Ant Design and Vue.js

根据官方文档,我们要实现这个slot,上代码:

<Select
                  placeholder="请输入姓名"
                  v-model:value="formStateUser.realname"
                  style="width: 100%"
                  show-search
                  :open="mnuOpen"
                  :options="items.map((item) => ({ value: item }))"
                  @search="onSearch"
                  allow-clear
                  ref="mnuSelect"
                  :dropdownMatchSelectWidth="false"
                >
                  <template #dropdownRender="{ menuNode: menu }">
                    <vxe-grid
                      ref="tableRef"
                      v-bind="gridOptions"
                      style="width: 100%; margin-top: -3px"
                      @cell-click="cellClickEvent"
                      :row-config="{ isHover: true }"
                    />
                    <Divider style="margin: 4px 0" />
                    <div
                      style="padding: 4px 8px; cursor: pointer"
                      @mousedown="(e) => e.preventDefault()"
                      @click="onAddInfo"
                    >
                      <plus-outlined />
                      <span class="modal-btn">增加</span>

                    </div>
                  </template>
                  <template #notFoundContent>
                    <span>暂无任用户信息。</span>
                  </template>
                </Select>

这里就是表格显示的位置 ,用的是vxe-grid来实现的:

上面就是Select数据选择的实现,提供一个简单思路,可以根据具体的环境来实现。

下面帖几个代码,来检测是否是点了表格+分页+增加按钮的,点击外边的部分,自动关闭对话框:

onMounted(() => {
    // 监听 document 上的点击事件
    document.addEventListener('click', (event) => {
      if (!isVxeTableClick(event)) {
        mnuOpen.value = false;//close
      }
    });
  });

const isVxeTableClick = (event) => {
    let target = event.target;
    while (target && target !== document) {
      if (
        target.className &&
        typeof target.className === 'string' &&
        (target.className.includes('vxe-table') ||
          target.className.includes('vxe-pager') ||
          target.className.includes('modal-btn'))
      ) {
        // 点击事件来自 vxe-table
        return true;
      }
      target = target.parentNode;
    }
    return false;
  };

主要是上面的代码,来检测是否要关闭dropdownRender。

相关推荐
计算机-秋大田7 小时前
基于Spring Boot的船舶监造系统的设计与实现,LW+源码+讲解
java·论文阅读·spring boot·后端·vue
Yaml418 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf21 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
shareloke2 天前
让Erupt框架支持.vue文件做自定义页面模版
vue
你白勺男孩TT3 天前
Vue项目中点击按钮后浏览器屏幕变黑,再次点击恢复的解决方法
vue.js·vue·springboot
虞泽3 天前
鸢尾博客项目开源
java·spring boot·vue·vue3·博客
工业互联网专业3 天前
Python毕业设计选题:基于django+vue的4S店客户管理系统
python·django·vue·毕业设计·源码·课程设计
麦麦大数据3 天前
vue+django+neo4j航班智能问答知识图谱可视化系统
django·vue·echarts·neo4j·智能问答·ltp·航班