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; 如果子集中选中 ...
随机推荐
- 将第三方包安装到maven本地仓库
今天在做jasper report生成pdf文档的时候,需要引入亚洲字体jar包.maven仓库是有这个jar包,但是在项目pom文件始终不能下载.无奈只有将jar包安装到maven本地仓库. 1 将 ...
- JavaScript 把字符串类型转换成日期类型
今天在写习题时,遇到些小问题,在这里把答案分享给大家,希望能帮助到大家! 一.把字符串转换成日期类型 var str = "1997-3-12"; var d = new Date ...
- blfs（systemv版本）学习笔记-wget的安装与配置
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! blfs wget项目地址:http://www.linuxfromscratch.org/blfs/view/8.3/basi ...
- React Native中Mobx的使用
从今天开始我们来搞搞状态管理可否,这几天没怎么写博客,因为被病魔战胜了,tmd,突然的降温让我不知所措,大家最近注意安全,毕竟年底了,查的严,呸,大家注意保暖 特别声明:写该文只是写一下用MobX的思 ...
- CSS3圆圈动画放大缩小循环动画效果
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- 如何在服务器上搭建svn
svn现在依然是一个流行的版本控制工具,但是大多数的人员只会使用客户端,并且也知道可以进行权限控制, 那么今天,我们就来给大家梳理一下 1.如何搭建svn的服务器 2.如何进行svn的权限控制 === ...
- [20171225]没有备份数据文件的恢复.txt
[20171225]没有备份数据文件的恢复.txt --//别人问的问题,增加了数据文件没有备份,如何恢复,实际上很简单,因为当前控制文件有记录建立时间只要从建立数据文件开始的--//归档日志都存在恢 ...
- C#语言————第四章 常用Convert类的类型转换方法
方法 说明Convert.ToInt32() 转换为整型(int 型)Convert.ToStringle() 转换为单精度浮点型(float 型)Convert.ToDouble() 转换为双精度 ...
- 在Emacs中使用git操作
在Emacs中使用git操作 1.安装 magit 插件 2.安装后开始使用 3.使用方法: . 使用 M-x:magit-status 打开当前仓库查看基本信息 .使用 ? 键查看magit命令绑定 ...
- httpd服务器的真实ip获取难题
web服务器httpd中想要获取真正的ip是个难度,我们先要在配置文件中定义错误日志的格式:如下所示: 然后获取ip 上面三条输出日志中,第一条是直接访问http://172.16.213.157/i ...