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。

相关推荐
Backstroke fish9 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小曲程序9 小时前
vue3 封装request请求
java·前端·typescript·vue
Lysun00110 小时前
[less] Operation on an invalid type
前端·vue·less·sass·scss
程序视点17 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
刚刚好ā18 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
ZwaterZ21 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
ZwaterZ1 天前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
木子七1 天前
vue2-vuex
前端·vue
小小黑0071 天前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
Ztiddler1 天前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue