vue小demo（穿梭框和全选框）

最新推荐文章于 2024-05-18 10:32:09 发布

故心v

最新推荐文章于 2024-05-18 10:32:09 发布

阅读量851

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41555854/article/details/109802119

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

vue小demo（穿梭框和全选框）

一个正在努力爱好运动的前端
座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。

文章目录

vue小demo（穿梭框和全选框）
一、穿梭框（邀请好友）
二、全选框

一、穿梭框（邀请好友）

效果：添加、删除、鼠标移入显示删除、移出隐藏

//关键代码
<!--左侧所有好友-->
				<div class="col-xs-6 col-sm-6" >
					<div class="panel panel-success">
						<!--标题-->
						<div class="panel-heading">
							<h3 class="panel-title">所有好友({{items.length}})</h3>
						</div>
						<!--内容-->
						<div class="panel-body panel-height">
							<ul>
								<li v-for="(v,i) in items" ::key="i" @click="addItem(v)">
									<span class="glyphicon glyphicon-fire photo"></span>{{v.name}}({{v.qq}})
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!--右侧选择联系人-->
				<div class="col-xs-6 col-sm-6" >
					<div class="panel panel-success">
						<!--标题-->
						<div class="panel-heading">
							<h3 class="panel-title">已选择联系人({{selectedItems.length}})</h3>
						</div>
						<!--内容-->
						<div class="panel-body panel-height">
							<ul >
								<li v-for="(v,i) in selectedItems" :key="i" @mouseover="flag=i" @mouseout="flag='hide'">
									<span class="glyphicon glyphicon-fire photo"></span>{{v.name}}({{v.qq}})
									<span class="glyphicon glyphicon-trash del" @click="delItem(i)" v-show="flag == i"></span>
								</li>
							</ul>
						</div>
					</div>

window.onload = function () {
    var vm = new Vue({
        el: '#my',
        data: {
            //左边数据
            items: [{ name: '陈奕迅', id: 1, qq: '12345678', state: false },
            { name: '李荣浩', id: 2, qq: '12345678', state: false },
            { name: '毛不易', id: 3, qq: '12345678', state: false },
            { name: '简弘亦', id: 4, qq: '24325324364', state: false },
            { name: '于文文', id: 5, qq: '242424', state: false },
            { name: '火简少女101', id: 6, qq: '2324324324', state: false },
            { name: 'TFBOYS', id: 7, qq: '54523242', state: false },
            { name: 'BEYOND', id: 8, qq: '23435346', state: false },
            { name: '华晨宇', id: 9, qq: '4242342534', state: false },
            { name: 'BIGBANG', id: 10, qq: '4322432423', state: false },
            { name: 'DAISHI DANCE', id: 11, qq: '243432432', state: false },
            { name: '李哈哈', id: 12, qq: '3244322432', state: false },
            { name: '周笔畅', id: 13, qq: '5352324532', state: false },
            { name: '张碧晨', id: 14, qq: '4324324324224', state: false },
            { name: '广东雨神', id: 15, qq: '4324324324', state: false }],
            selectedItems: [], //右边数组
            flag:'hide' //默认隐藏
        },
        methods: {
            //添加
            addItem: function (v) {
                //{name:v.name,id:v.id,qq:v.qq,state:v.state
                this.selectedItems.push(v);
                //去重 使用... + new Set
                this.selectedItems = [...new Set(this.selectedItems)];
            },
            //删除
            delItem: function (index) {
                //splice
                // this.selectedItems.splice(index, 1);
                //filter
                this.selectedItems = this.selectedItems.filter((item, i) => i != index);
            }
        },
    })
}

效果图
在这里插入图片描述

二、全选框

效果：全选与多选

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>
   <title>用户列表checkbox选项操作（全选）</title>
   <link rel="stylesheet" type="text/css" href="css/index.css">
   <script src='js/vue.js'></script>
   <script src='js/index.js'></script>
 </head>
 <body>
   <div id='demo'>
     <table class="table"> 
           <thead>
             <tr>
               <th>
                 <input type="checkbox" v-model="checkAll" @change="checkAllItem()">
               </th>
               <th>用户姓名</th>
               <th>用户性别</th>
               <th>所在城市</th>
               <th>操作</th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="(v,i) in items" :key="i">
                 <th><input type="checkbox" v-model="v.state" @change="checkItem()"></th>
                 <td>{{v.name}}</td>
                 <td>{{v.sex}}</td>
                 <td>{{v.city}}</td>
                 <td><button disabled="true">删除</button></td>
             </tr>
           </tbody>
         </table>
    </div>
   
 </body>
 </html>

window.onload = function () {
    var vm = new Vue({
        el: '#demo',
        data: {
            items: [
                {name:'张三1',sex:'男',city:'北京1',state:true},
                {name:'张三2',sex:'女',city:'北京2',state:false},
                {name:'张三3',sex:'男',city:'北京3',state:false},
                {name:'张三4',sex:'男',city:'北京4',state:false},
                {name:'张三5',sex:'女',city:'北京5',state:false},
                {name:'张三6',sex:'男',city:'北京6',state:false},
                {name:'张三7',sex:'男',city:'北京7',state:true},
            ],
            checkAll: false, //全选的状态
        },
        methods: {
            // 全选
            checkAllItem: function () {
                //打全选选中时 ,全部state为true  不选中时  全部state为flase
                //也就是说全选的状态等于他们的状态
                this.items.forEach((v) => {
                    v.state = this.checkAll;
                });
            },
            //多选
            checkItem: function () {
                //当全部选中时 全选打√   //没有全部选中时  不打√
                //也就是当全部状态为true时的长度 = items.length时  全选打√
                var n = this.items.filter(item=>item.state).length;
                console.log(n);
                n==this.items.length? this.checkAll = true:this.checkAll = false;

                //2.every()检测数组元素是否都符合要求，都符合返回true,只要有一个没有符合返回false
                // this.checkAll = this.items.every(item=>item.state);
            }
        },
    })
}

效果图
在这里插入图片描述

故心v

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue小demo（穿梭框和全选框）

vue小demo（穿梭框和全选框）一个正在努力爱好运动的程序猿座右铭：越努力越幸运，越运动越健康，热爱编程，热爱运动。文章目录vue小demo（穿梭框和全选框）一、穿梭框（邀请好友）二、全选框一、穿梭框（邀请好友）效果：添加、删除、鼠标移入显示删除、移出隐藏//关键代码 <div class="col-xs-6 col-sm-6" > <div class="panel panel-success">
复制链接

扫一扫