1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>arrSelect</title>
</head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<div>
<ul>
<li v-for="(item,index) in tableData" :key="item.index"><input type="checkbox" @click="fn(item,item.checkval)" :checked="item.checkval" /><span>{{ item.date }}-{{ item.name }}-{{ item.preference }}</span></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var vue =new Vue({
el: "#app",
data() {
return {
tableData: [{
date: '2016-05-04',
name: '智立方',
checkval: false,
preference: '',
address: '上海市番禺路868'
}, {
date: '2016-05-04',
name: '智立方',
checkval: false,
preference: '',
address: '上海市番禺路868'
}, {
date: '2016-05-04',
name: '智立方',
checkval: false,
preference: '',
address: '上海市番禺路868'
}, {
date: '2016-05-04',
name: '智立方',
checkval: false,
preference: '',
address: '上海市番禺路868'
}, {
date: '2016-05-04',
name: '智立方',
checkval: false,
preference: '',
address: '上海市番禺路868'
}],
handleArr:[], // 选中的数组
handleNum: 0 // 选中的顺序
}
},
methods: {
fn(val,status){
val.checkval = !status // 再次点击反选字段;
if( val.checkval ){ // 根据是否选中来处理相应的选中顺序;
this.handleArr.push(val); // 选中则添加到选中数组；
val.preference = (this.handleNum<=this.handleArr.length ? this.handleNum+=1 : this.handleNum = this.handleArr.length); // 根据选中数组的长度来增加选中顺序值；
} else {
this.handleArr.splice(this.handleArr.indexOf(val),1); // 反选之后删除选中的数组
for( let item in this.tableData ){ // 循环绑定的数据来判断顺序值是否需要减少；
if( this.tableData[item].preference>0 && this.tableData[item].preference > val.preference ){
this.tableData[item].preference --;
this.handleNum--;
}
}
this.handleNum = this.handleArr.length; // 将同步数组的长度附顺序字段；目的是获取顺序值目前的最大值；
val.preference = ''; // 如果是反选则清空顺序值
}
}
}
})
</script>
</html>
|