<!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>
