vue分页全选和单选操作
<!DOCTYPE html>
<html>
<head>
<title>演示Vue</title>
<style>
ul,li {list-style: none;}
.tb-table-list {
width: 100%
}
.tb-table-list.title h3 {
float: left;
font-size: 16px;
margin: 0;
margin-top: 6px;
font-weight: 400
}
.tb-table-list.title.operation {
float: right;
font-size: 16px
}
.tb-table-list .tb-table2 {
width: 100%;
float: left;
border: 1px solid #dfe6ec;
border-right: none;
margin-top: 10px;
margin-bottom: 30px;
border-bottom: none
}
.tb-table-list .tb-table2 th {
background-color: #f2f2f2;
height: 40px
}
.tb-table-list .tb-table2 tr {
height: 40px
}
.tb-table-list .tb-table2 td,
.tb-table-list .tb-table2 th {
position: relative;
border-bottom: 1px solid #dfe6ec;
text-overflow: ellipsis;
vertical-align: middle;
padding: 5px;
text-align: center;
border-right: 1px solid #dfe6ec
}
.tb-table-list .tb-table2 td.cell, .tb-table-list .tb-table2 th.cell {
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-overflow: ellipsis;
white-space: normal;
word-break: break -all;
padding-right: 2px;
padding-left: 2px;
overflow: hidden
}
.tb-table-list .tb-table2 td.noDatas,
.tb-table-list .tb-table2 th.noDatas {
text-align: left
}
.tb-table-list .tb-table2.tb-arrow-up {
position: absolute;
bottom: -1px;
color: #d6e4f0;
font-size: 22px;
height: 13px;
background: #fff;
left: 45%;
z-index: 100
}
.tb-table-list .tb-table2.cursor-item {
cursor: pointer
}
.tb-table-style .tb-table2 td {
text-align: center
}
.tb-table-style td.thead {
background: #ebf0f4;
color: #000
}
.tb-table-style .tb-table2 .current {
background-color: #f44336;
color: #fff
}
</style>
</head>
<body>
<div id="app">
<div class='tb-table-list'>
<table class="tb-table2" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th width="60" v-if="datas.length > 0">
<div class="cell">
<input @change="checkedAll" v-model='checkAllBox' type='checkbox' />
</div>
</th>
<th width="200"><div class="cell">姓名</div></th>
<th width="200"><div class="cell">年龄</div></th>
</tr>
</thead>
<tbody>
<tr v-if="datas.length > 0" v-for="(item, index) in datas">
<td>
<div class="cell">
<input @change="singleSelect(item, index)" v-model="item.isCheck" type='checkbox' />
</div>
</td>
<td><div class="cell">{{item.name}}</div></td>
<td><div class="cell">{{item.age}}</div></td>
</tr>
<tr v-if="datas.length === 0">
<td colspan="3"><div class="cell noDatas">暂无数据</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script src="https://tugenhua0707.github.io/vue/vue-watch/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
// 保存选中的项
saveSelectItems: [],
checkAllBox: false,
datas: [
{ 'name': '姓名', 'age': '22', 'isCheck': false },
{ 'name': '姓名', 'age': '22', 'isCheck': false },
{ 'name': '姓名', 'age': '22', 'isCheck': false },
{ 'name': '姓名', 'age': '22', 'isCheck': false },
{ 'name': '姓名', 'age': '22', 'isCheck': false }
]
},
methods: {
// 全选
checkedAll() {
if (this.datas.length > 0) {
for (let i = 0; i < this.datas.length; i++) {
if (this.checkAllBox) {
this.$set(this.datas[i], 'isCheck', true);
// 全选操作
this.checkAllIsChecked(this.datas[i], true);
} else {
this.$set(this.datas[i], 'isCheck', false);
this.checkAllIsChecked(this.datas[i], false);
}
}
}
},
checkAllIsChecked(item, isflag) {
let count = 0;
if (isflag) {
if (this.saveSelectItems.length > 0) {
for (let i = 0; i < this.saveSelectItems.length; i++) {
if (this.saveSelectItems[i].id === item.id) {
this.saveSelectItems[i].isCheck = isflag;
count++;
}
}
if (count < 1) {
item.isCheck = isflag;
this.saveSelectItems.push(item);
}
} else {
item.isCheck = isflag;
this.saveSelectItems.push(item);
}
} else {
if (this.saveSelectItems.length > 0) {
for (let j = 0; j < this.saveSelectItems.length; j++) {
if (this.saveSelectItems[j].id === item.id) {
this.saveSelectItems.splice(j, 1);
}
}
}
}
},
/*
单选
@param item 当前选中的项
@param index 当前的索引
*/
singleSelect(item, index) {
this.$set(this.datas[index], 'isCheck', item.isCheck);
if (item.isCheck) {
this.saveSelectItems.push(item);
} else {
this.delItem(item);
}
const checkCount = this.isCheckAllFunc();
if (checkCount === this.datas.length) {
this.checkAllBox = true;
} else {
this.checkAllBox = false;
}
},
isCheckAllFunc() {
let count = 0;
if (this.datas.length > 0) {
for (let i = 0; i < this.datas.length; i++) {
if (this.datas[i].isCheck) {
count++;
}
}
}
return count;
},
delItem(item) {
if (this.saveSelectItems.length > 0) {
for (let i = 0; i < this.saveSelectItems.length; i++) {
if (this.saveSelectItems[i].id === item.id) {
this.saveSelectItems.splice(i, 1);
}
}
}
},
/*
分页请求后返回新数据的时候，该每一项设置属性 isCheck 为 false，但是当数组内部有保存的数据时，
且该保存的数据id和请求返回回来的id相同的话，就把该项选中，比如我勾选了第一页中的某一项，会把
该项的id保存到数组内部去，当切换到第二页的时候，那么再返回到第一页的时候，会获取该id是否与数组的
id是否相同，如果相同的话，就把该项数据选中
*/
addIsChecked(datas) {
let count = 0;
if (datas.length > 0) {
for (let i = 0; i < datas.length; i++) {
datas[i].isCheck = false;
if (this.saveSelectItems.length > 0) {
for (let j = 0; j < this.saveSelectItems.length; j++) {
if (datas[i].id === this.saveSelectItems[j].id) {
datas[i].isCheck = true;
count++;
}
}
}
}
}
if (this.datas.length !== 0 && (count === this.pageSize)) {
this.checkAllBox = true;
}
return datas;
},
query() {
/*
ajax请求
Promise.all([this.$store.dispatch('commonActionGet', ['cashRemitSuspend', obj])]).then((res) => {
if (请求成功的话) {
// 这句话的含义是 分页请求数据 第一页全选了，切换到第二页的时候，全选按钮不勾选
this.checkAllBox = false; // 返回数据，如果有数据的话，给每一项设置属性 isCheck = false
// 如果当前保存的数据id和分页中的数据id相同的话，就默认勾选该项。这就是当第一页勾选了，点击第二页的时候，
// 我会把当前的勾选的id保存到数组里面去，为了再返回到第一页的时候，默认选中该项 this.datas = res[0].data ? this.addIsChecked(res[0].data) : [];
}
})
*/
}
}
})
</script>
</html>
vue分页全选和单选操作的更多相关文章
- jq pagination分页 全选、单选的思考
$().pagination(总条数,配置项); 后端分页的跨页选择: 思路:把浏览过的页整体保存为,整体拥有 curPage(当前页码).allChoice(当前页是否全选).selected当前页 ...
- vue实现全选效果
vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...
- vue实现全选框效果
vue实现全选框效果 一.总结 一句话总结: 全选的checkbox点击的时候判断这个checkbox的状态,如果没选中,说明下一个操作是选中所有 下面的每个checkbox判断一下是否所有的chec ...
- 优秀前端工程师必备: 非常常用的checkbox的骚操作---全选和单选demo
提要: 前端开发的时候, 经常会遇到表格勾选, 单个勾选判断是否全选的事情.趁着有时间, 总结一下以备不时之需! 就像下面这个栗子: 1 源代码: h5 // 全选框 <input type=& ...
- 全选与单选chekbox的自定义实现(angular框架)
2017年7月4日,我原本可以像其他同时一样早点回家,玩几把王者荣耀,但是我没有,因为我选择留下来,写一篇博客. 项目中经常性的会遇到什么点击"全选"按钮,勾中所有"单选 ...
- angular实现表格的全选、单选、部分删除以及全部删除
昨天自己写了一小段js,在全选的时候有点儿小坑,然后,整理了一下.今天把它贴出来,希望以后还记得. 大家也可以去github上查看或下载:https://github.com/dreamITGirl/ ...
- vue实现全选，反选
1.example.vue <template> <table class="table-common"> <tr> <th class= ...
- 使用vue实现复选框单选多选
界面样式: <div class="right_con" v-if="isClickApply" style="border:none" ...
- [原]vue实现全选，反选
用vue写业务代码时候,后端大神丢给我一堆数据,要求是做全选,反选功能,然后把用户更改的数据全部返回给他 基本思路 如果父级选中了,那么父级下面的子集全部选中checked=true; 如果子集中选中 ...
随机推荐
- Java使用for循环输出菱形
/** * This program would print out a diamond * @param row the row of diamond * @version 2018-7-23 * ...
- 乐字节-Java8新特性之Date API
上一篇文章,小乐给大家带来了Java8新特性之Optional,接下来本文将会给大家介绍Java8新特性之Date API 前言: Java 8通过发布新的Date-Time API来进一步加强对日期 ...
- Vim i和a区别
i是当前位置插入 a是当前文字的后面插入
- 配置Tree Shaking来减少JavaScript的打包体积
译者按: 用Tree Shaking技术来减少JavaScript的Payload大小 原文: Reduce JavaScript Payloads with Tree Shaking 译者: Fun ...
- PDF格式的“在线阅读”和“下载”
产生背景: 一个需求,用户可在线阅读PDF,也可下载到本地.听需求来源说人家的网站上的可以做,问我们能做吗,需要这个功能,就要来了网址,看看页面. 问题:上传PDF文件后,发现访问地址在浏览器上打开, ...
- 从零开始学习html（二）认识标签(第一部分)——上
一.语义化,让你的网页更好的被搜索引擎理 学习html标签过程中,主要注意两个方面的学习:标签的用途.标签在浏览器中的默认样式. 标签的用途:我们学习网页制作时,常常会听到一个词,语义化. 那么什么叫 ...
- 2.网络编程-udp
# 使用套接字发送udp数据import socket s = socket.socket(socket.AF_INET, SOCK_DGRAM) s.sendto(b"hello" ...
- genymotion 模拟器内安装软件 the app contains ARM native code and your devices cannot run ARM instructions
问题如图: 解决方法: 下载一个Genymotion-ARM-Translation软件,安装到模拟器中就好了
- tkinter调取签名网而设计签名页面（十七）
# --*-- coding:utf-8 --*-- import tkinter as tk import re import requests from tkinter import messag ...
- python第六十六天--sqlalchemy
#!usr/bin/env python #-*-coding:utf-8-*- # Author calmyan #python #2017/7/6 21:29 #__author__='Admin ...