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。

  • 8
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
旅游社交小程序功能有管理员和用户。管理员有个人心,用户管理,每日签到管理,景点推荐管理,景点分类管理,防疫查询管理,美食推荐管理,酒店推荐管理,周边推荐管理,分享圈管理,我的收藏管理,系统管理。用户可以在微信小程序上注册登录,进行每日签到,防疫查询,可以在分享圈里面进行分享自己想要分享的内容,查看和收藏景点以及美食的推荐等操作。因而具有一定的实用性。 本站后台采用Java的SSM框架进行后台管理开发,可以在浏览器上登录进行后台数据方面的管理,MySQL作为本地数据库,微信小程序用到了微信开发者工具,充分保证系统的稳定性。系统具有界面清晰、操作简单,功能齐全的特点,使得旅游社交小程序管理工作系统化、规范化。 管理员可以管理用户信息,可以对用户信息添加修改删除。管理员可以对景点推荐信息进行添加修改删除操作。管理员可以对分享圈信息进行添加,修改,删除操作。管理员可以对美食推荐信息进行添加,修改,删除操作。管理员可以对酒店推荐信息进行添加,修改,删除操作。管理员可以对周边推荐信息进行添加,修改,删除操作。 小程序用户是需要注册才可以进行登录的,登录后在首页可以查看相关信息,并且下面导航可以点击到其他功能模块。在小程序里点击我的,会出现关于我的界面,在这里可以修改个人信息,以及可以点击其他功能模块。用户想要把一些信息分享到分享圈的时候,可以点击新增,然后输入自己想要分享的信息就可以进行分享圈的操作。用户可以在景点推荐里面进行收藏和评论等操作。用户可以在美食推荐模块搜索和查看美食推荐的相关信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值