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; 如果子集中选中 ...
随机推荐
- 【原】Spring AOP实现对Redis的缓存同步
前言:刚开始采用spring cache作为缓存数据,到后面发现扩展性不灵活,于是基于sprig cache原理自定义一套规则用于缓存数据. 请求过程: 根据请求参数生成Key,后面我们会对生成Key ...
- Python简单的网络编程
OSI 模型介绍 应用层 -- 对接受的数据进行解释.加密与解密.压缩与解压缩 会话层 -- 通过传输层(端口号: 传输端口和接受端口) 建立数据传输的通路 传输层 -- 定义了一些传输数据的协议和端 ...
- JS的防抖，节流，柯里化和反柯里化
今天我们来搞一搞节流,防抖,柯里化和反柯里化吧,是不是一看这词就觉得哎哟wc,有点高大上啊.事实上,我们可以在不经意间用过他们但是你却不知道他们叫什么,没关系,相信看了今天的文章你会有一些收获的 节流 ...
- python之socketserver ftp功能简单讲解
TCP协议中的socket一次只能和一个客户端通信,然而socketserver可以实现和多个客户端通信. 它是在socket的基础上进行了一层封装,底层还是调用的socket # 服务端 impor ...
- ArcGIS JavaScript API动态图层
矢量动态图层 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Typ ...
- 图解get方法与filter方法
在django的数据库查找方法中,get与filter方法是查找单目数据,用图记录了这两个方法查找数据各自返回的是什么?
- 【PAT】B1082 射击比赛（20 分）
水提水题,直接贴代码啦 #include<cstdio> #include<algorithm> using namespace std; struct ppp{ int id ...
- 解决内存不能为read错误
解决方法 1. 命令解决方法:开始菜单,运行,输入cmd,回车,在命令提示符下输入(复制即可) :for %1 in (%windir%\system32\*.ocx) do regsv ...
- 彻底修改 Windows 系统用户名
在 Windows 安装的时候会输入一个用户名,电脑店装的一般都会给你设置成Admin之类的.这个时候你想要改成自己的,一般都是直接在 控制面板 > 用户帐户和家庭安全 > 用户帐户 &g ...
- spark-Scala
一.spark的特点 1.快速的 2.容易使用的 3.通用的 4.开放的 二.spark组件 sparkCore sparkSQL sparkStreaming MLibmachielearning ...