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; 如果子集中选中 ...
随机推荐
- Contest2075 - 湖南多校对抗（csu1576）大数 Catalan Square
Problem C: Catalan Square Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 42 Solved: 16[Submit][Stat ...
- Gauss-Laguerre quadrature rule
% matlab script to derive the 2-point Gauss-Laguerre quadrature rule % and use it on an example % in ...
- OAuth2.0的refresh token
最近看人人网的OAuth认证,发现他是OAuth2.0,之前一直看的是新浪的OAuth,是OAuth1.0. 二者还是有很多不同的,主要的不同点在access token的获取方式. OAuth1.0 ...
- lfs（systemd版本）学习笔记-第1页
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一名linux爱好者,记录构建Linux From Scratch的过程 经博客园-骏马金龙前辈介绍,开始接触学习lfs,用博客 ...
- spring boot 随手记
1.当加入security 起步依赖后,如果不做任何手动配置的话,默认会跳转到一个登录页面,不管你喜不喜欢,所有的请求都必须登录,用户名和密码是保存在内存中的, 默认用户名是user 密码在控制台里 ...
- python中集合-set
集合-set 集合是高中数学中的一个概念 一堆确定的无序的唯一的数据,集合中每一个数据成为一个元素 # 集合的定义 s = set() print(type(s)) print(s) print(&q ...
- imooc《JavaScript深入浅出》上的一个 arraysSimilar 函数
任务 请在 index.html 文件中,编写 arraysSimilar 函数,实现判断传入的两个数组是否相似.具体需求: 数组中的成员类型相同,顺序可以不同.例如 [1, true] 与 [fal ...
- 2017-12-21 FriceEngine试用与API中文化
早先就听闻FriceEngine已有中文接口版本, 可惜没有机会尝试. 经原作者 @大笨蛋千里冰封 (Github账号 @ice1000 )建议, 在FriceEngine的DSL封装的接口基础上, ...
- Git应用—03分支管理和冲突解决(转载)
Git 分支管理和冲突解决 https://www.cnblogs.com/mengdd/p/3585038.html 创建分支 git branch 没有参数,显示本地版本库中所有的本地分支名称. ...
- 在Visualforce页面中使用Visual Flow
在本文中,我们将通过一个示例说明如何将"流"(Visual Flow)用于Visualforce页面. 更全面的知识可以参考官方文档. 创建流 我们要创建一个流,它的作用是得到一个 ...