vue.js写个选择多条数据的和查询功能

最新推荐文章于 2024-02-21 18:07:28 发布
最新推荐文章于 2024-02-21 18:07:28 发布
阅读量3.8k 收藏 4
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41997724/article/details/86521942
版权

效果图如下：

需求是（其中我用了mui的css样式）：
1、点击input框后选择审核人列表菜单过渡从下往上出现；
2、选择人后点击确定按钮，选择的人出现在input框中；
3、点击空白的地方则关闭选择审核人窗口
4、选择审核人列表菜单中有查询功能
实例一实例一
Computer$1600

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link rel="stylesheet" href="css/mui.min.css">
    <style>
        /*，蒙版*/
        .overlay{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
            background: rgba(0, 0, 0, .5);
        }
     .checklist{
         -webkit-transition: .3s;
         position: fixed;
         bottom: 0;
         left: 0;
         z-index: 2000;
         width: 100%;
         background-color: #fff;
     }
        .wrap {
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 45px;
            font-size: 16px;
            padding: 0 13px;
            border-bottom: 1px solid rgb(217, 217, 217);
        }
        .cancel{
            padding: 5px 10px;
            font-size: 12px;
            font-weight: 400;
            display: inline-block;
            cursor: pointer;
            text-align: center;
            color: #333;
            border: 1px solid #ccc;
            border-radius: 3px;
            background-color: #fff;
        }
        .confirm{
            padding: 5px 10px;
            font-size: 12px;
            font-weight: 400;
            display: inline-block;
            cursor: pointer;
            text-align: center;
            border-radius: 3px;
            color: #fff;
            border: 1px solid #007aff;
            background-color: #007aff;
        }
       .list{
           width: 100%;
           height: 230px;
           overflow-x: hidden;
           overflow-y: scroll;
       }
        .list .line {
            display: -webkit-flex;
            display: flex;
            justify-content: center;  /*周围留有空白*/
            align-items: center;
            height: 30px;
        }
        .list .line .lines{
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: center; /*周围留有空白*/
            align-items: flex-start;
            width: 90%;
        }
        /*过渡样式*/
        .fade-enter-active, .fade-leave-active {
            -webkit-transform: translateY(0px);
        }
        .fade-enter, .fade-leave-active {
            -webkit-transform: translateY(300px);
        }
            /*搜索框样式*/
        .mui-search .mui-placeholder{
            line-height: 30px;
        }
        .row{
            overflow: visible !important;
            position: relative;
            left: 30%;
            width: 60%;
            transform: translateX(-50%);
            height: 30px;
            display: inline-block;
        }
        input[type=search]{
            height: 30px;
            padding-left: 30px;
        }
        .mui-search input[type=search]{
            padding-right: 0px;
        }
         .title{
            width: 110%;
        }
    </style>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input type="text" @click="btn($event)" v-model="peoPle">
     <!--过渡的动画-->
     <transition name="fade">
         <div class="checklist" v-if="visible" ref="main">
             <div class="wrap">
                 <button class="cancel" @click="onhide">取消</button>
                 <div class="mui-input-row row">
                     <div>
                         <span class="mui-icon mui-icon-search" style="position: absolute; top: 9%; left: 2%;"></span>
                     </div>
                     <input v-model="search" type="search" placeholder="" class="int mui-input-clear">
                 </div>
               <!--  <span class="title">选择审核人</span>-->
                 <button class="confirm" @click="onConfirm">完成</button>
             </div>
             <div class="list">
                 <div class="line" v-for="item in list">
                     <div class="lines">
                         <label :for="item.name" class="title">{{item.name}}</label>
                     </div>
                     <div>
                         <input :id="item.name" :value="item.name" type="checkbox" v-model="checkedNames">
                     </div>
                 </div>
             </div>
         </div>
     </transition>
     <!--蒙层-->
     <div class="overlay" v-if="visible"></div>
</div>
<script>
  var vm = new Vue({
        el: '#app',
      //屏幕以外的点击
        data: {
            message: 'Hello Vue.js!',
            visible:false,
            info:[
                {
                    'name':'智子'
                },
                {
                    'name':'王静云'
                },
                {
                    'name':'王云'
                },
                {
                    'name':'张三'
                },
                {
                    'name':'李四'
                },
                {
                    'name':'王五'
                },
                {
                    'name':'赵璐'
                },
                {
                    'name':'李文'
                },
                {
                    'name':'海翔'
                }
            ], //数据
            peoPle:'',
            search:'', //查询
            checkedNames:[]
        },
      //查询功能
      //  computed比methods效率高，不需要重新渲染页面
      computed:{
          list:function(){
              const arr =[];
              for(let i=0;i<this.info.length;i++){
                  //   console.log(that.info.length)
                  if(this.info[i].name.indexOf(this.search)!=-1){
                      arr.push(this.info[i])
                  }
              }
              return arr;
          }
      },
        methods:{
            /*点击input*/
            btn (event) {
                //阻止冒泡
                event || (event = window.event);

                event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
                this.visible ? this.hide() : this.show()
            },
            show () {
                this.visible = true;
                document.addEventListener('click', this.hidePanel, false)
            },
            hide () {
                this.visible = false;
                document.removeEventListener('click', this.hidePanel, false)
            },

            hidePanel (e) {
                if (this.$refs.main && !this.$refs.main.contains(e.target)) {//点击除弹出层外的空白区域
                    this.hide()
                }
            },
            /*取消*/
            onhide(){
                this.visible = false;
            },
            /*完成*/
            onConfirm(){
                this.visible = false;
                this.peoPle= this.checkedNames
            }
        }
    })
</script>
</body>
</html>
zeke_x
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+node.js+mysql+ant design实现表格的查询功能
qq_53541336的博客
04-22 788
今日主要分享如何运用vue、nodejs、mysql及ant design构建表格数据查询功能，这也是众多项目开发者关注的问题。最关键在于前端与后端的协作，后端数据则通过nodejs编写。尽管涉及多项技术，看似复杂，但实际操作却并非困难。当然，首要条件是熟悉并掌握各项技术。
使用vue开发多级多选菜单组件
热门推荐
在这里写Bug
08-25 3万+
要开发一个这样的多级多选菜单组件，功能是： 点击父标题栏可以打开与折叠子列表 点击父标题栏的勾选图标可以全选或取消子列表 点击子列表的勾选图标达到全选时，父标题栏的勾选图标自动勾选；反之，没达到全选时，父标题栏的勾选图标自动取消勾选 当所有父标题栏的勾选图标达到全选时，最底下那个全选框自动勾选；反之，没达到全选时，最底下那个全选框自动取消勾选 点击最底下那个全选框可以全选或取消全部的勾选图标所以总结
vue实现表格的查询，下拉框，以及分页功能
10-25
用vuejs实现表格的模糊查询，下拉框选择表格的分类，表格对应的列显示分类，以及点击某列内容进行跳转，以及分页的上一页下一页功能，和最后一页不能选择
vue实现查询多条记录_Mongoose 实现关联查询和踩坑记录
weixin_39556811的博客
11-21 399
本文源自工作中的一个问题，在使用 Mongoose 做关联查询时发现使用 populate() 方法不能直接关联非 _id 之外的其它字段，在网上搜索时这块的解决方案也并不是很多，在经过一番查阅、测试之后，有两种可行的方案，使用 Mongoose 的 virtual 结合 populate 和 MongoDB 原生提供的 Aggregate 里面的 $lookup 阶段来实现。文档内嵌与...
springboot+vue 架构 （三） springboot 多数据源配置
shrek11的专栏
04-04 384
springboot里配置多数据源 写2个数据源配置类，分别指到不同的DAO操作数据库文件 mysql的 @Configuration @MapperScan(basePackages = {"com.heeexy.example.dao.mysql"},sqlSessionFactoryRef = "mysqlsqlSessionFactory") public class MyBati...
mysql逗号分隔-mybatis查询同时有的数据以及vue下拉框多选数据传递
Half_immortal的博客
08-14 313
mysql 逗号分隔，下拉框多选
Vue.js 实现数据展示全部和收起功能
10-18
在Vue.js中实现数据展示全部和收起功能是一项常见的需求，尤其在处理大量列表数据时。这个功能使得用户能够高效地浏览信息，同时保持页面整洁。以下是一个详细步骤的介绍，帮助你理解如何使用Vue.js来实现这一功能。...
Vue.js在数组中插入重复数据的实现代码
01-19
1、在默认的情况下，Vue.js默认不支持往数组中加入重复的数据。可以使用track-by=$index来实现。 2、不使用track-by=”$index”的数组插入，数组不支持重复数据的插入  2.1 JavaScript代码 [removed][removed] ...
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
12-29
本文实例讲述了vue.js基于v-for实现批量渲染 Json数组对象列表数据。分享给大家供大家参考，具体如下： Vuejs的出现减轻了对DOM的直接操作，同时它提供的 v-for 渲染列表数据也给我们提供了很大的方便。即使是复杂的...
vue-simple-suggest-Vue.js的简单但功能丰富的自动完成组件-Vue.js开发
05-27
-save vue-simple-suggest参见vue-simple-suggest的安装指南用于Vue.js的简单但功能丰富的自动完成组件安装npm install --save vue-simple-suggest有关更多选项，请参见安装指南。 目录vue-simple-suggest安装目录...
前端vue解析多重嵌套的json数据格式
这里是前端，是不一样的前端
06-12 3585
1.先上数据格式看看，这数据格式让我花费了近一上午才解决的 1.这是控制台带你出来的数据格式 applicableFormatsQt: "[{\"storeCode\":\"012002\",\ "storeName\":\"购物商场\",\ "dedicatedSiteFee\":\"4254.90\"}]" 2.这是复制过来的数据格式 "[{ "storeCode":"012002", "storeName":"购物商场", "dedicatedSiteFee":"4254.90" }]" 3.控制
Vue实现表格批量审核功能实例代码
10-16
主要为大家详细介绍了Vue实现表格批量审核功能实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
P19-Vue3后台管理系统-用户管理界面-新增用户和查询用户
Bruce小鬼
02-20 3130
P19-Vue3后台管理系统-用户管理界面-新增用户和查询用户 1.概述 这篇文章介绍新增用户和查询用户功能开发 2.新增用户 2.1.新增用户实现逻辑 1.点击新建按钮绑定新增用户方法 2.新增用户方法中调用form弹框控件 3.在form弹框控件中调用confirm方法，该方法调用新增用户接口。 2.2.新增用户效果 3.根据姓名搜索用户 3.1.搜索用户逻辑 点击搜索后，将搜索用户名称作为查询条件传给查询用户数据接口，该接口返回符合条件的数据 3.2.搜索用户效果 4.新增用户
vue实现前端搜索功能
mia1106的博客
07-29 2万+
当数据量不是很大时，可以在前端进行搜索。这里实现基本的搜索功能，可以根据实际情形，再增添功能，将其变复杂。 将下面的代码贴过去，就可以直接体验简单的搜索功能。没有写样式，仅供大家了解实现的逻辑。 界面 界面通常包含最基础的几部分，一是搜索框，二是搜索出的内容的列表展示。这两个基本上是必须。此外，可以再添加取消按钮，即清空你的搜索，等等部分。 <div id="app"> ...
vue 实现触底查询功能(vant组件)
m0_57891856的博客
11-23 989
触底查询
第一节 VUE3 增删改查
最新发布
zjltianxin的博客
02-21 968
1.查询
vue+element 实现input批量查询条件
小二来一只葫芦
09-21 1028
vue+element 实现input批量查询条件
vue查询列表中所有用户信息_Vue电商后台管理系统项目第3篇-首页用户列表增删改查功能...
weixin_42524308的博客
01-15 693
前言由于之前的作者没有再更新这个后台管理系统项目的文章了，我想着把它的项目重头到位做一遍，把剩下的文章写完，把这个项目记录完整，以后遇到类似的后台管理系统项目，可以快速复习一些知识点。添加用户这个操作在用户列表页面，所以路由不用再进行 处理了。基于单文件组件：添加事件绑定--弹出新增用户对话框添加dialog对话框Element-UI组件>dialog对话框>自定义内容>表单重点...
SpringBoot+VUE实现条件搜索和分页查询、批量删除
m0_54435916的博客
10-10 2907
SpringBoot+VUE实现条件搜索和分页查询、批量删除
用vue.js写一个发票表格
05-28
通过 Vue.js 的 `v-for` 指令可以动态地生成多条发票记录。使用 `v-model` 指令可以将表单元素和 Vue 实例的数据进行双向绑定。在计算每条发票的金额、税额和价税合计时，使用了 Vue.js 中的计算属性（`computed`）...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值