vue中一维数组的全选、全不选、反选（图文示例）_数组全选

查看本专栏目录

关于作者

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。

示例背景

根据vue项目的需求，需要做一维数组的全选、全不选、反选功能。 怎么制作呢？ 主要是判断循环选中的状态，做数据的更改设置即可。 下面是一个示例，具体参考源代码。

示例效果图

示例源代码

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-01-11
*/

<template>
	<div class="djs-box">
		<div class="topBox">
			<h3>vue中一维数组全选、全不选、反选 </h3>
			<div>大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>

		</div>
		<div class="dajianshi">

			<div class="box">
				<h4>变换后的一维数组</h4>
				<p v-for="(item,index) in arr1" :key="index">
					<el-checkbox v-model="item.isChecked" >
						内容：{{item.info}}-时间：{{item.time}}</el-checkbox>
				</p>
				<h4>
					<el-button @click="chooseAll()" type="primary" size="mini"> 全选</el-button>
					<el-button @click="clearAll()" type="primary" size="mini"> 全不选</el-button>
					<el-button @click="inverse()" type="primary" size="mini">反选</el-button>
				</h4>
			</div>



		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				isCart: false,
				arr: [{
						'time': '2023-12-07',
						'code': 'S10',
						'Gname': 'G10',
						'info': '大剑师1'
					},
					{
						'time': '2023-12-07',
						'code': 'S10',
						'Gname': 'G10',
						'info': '大剑师2'
					},
					{
						'time': '2023-12-07',
						'code': 'S11',
						'Gname': 'G11',
						'info': '大剑师3'
					},
					{
						'time': '2023-12-08',
						'code': 'S10',
						'Gname': 'G10',
						'info': '大剑师4'
					},
					{
						'time': '2023-12-08',
						'code': 'S11',
						'Gname': 'G11',
						'info': '大剑师5'
					},
					{
						'time': '2023-12-09',
						'code': 'S12',
						'Gname': 'G12',
						'info': '大剑师6'
					}
				],
				arr1: [],

			}
		},
		mounted() {
			this.arr1 = this.dajianshi_arr1to1(this.arr);
			console.log(this.arr1)
		},

		methods: {
            chooseAll(){
				for(let i=0;i<this.arr1.length;i++){
					this.$set(this.arr1[i],'isChecked', true)
				}				
			},
			clearAll(){
				for(let i=0;i<this.arr1.length;i++){
					this.$set(this.arr1[i],'isChecked', false)
				}
			},
			inverse(){
				for(let i=0;i<this.arr1.length;i++){
					let x=this.arr1[i].isChecked;
					this.$set(this.arr1[i],'isChecked', !x)
				}
			},


			dajianshi_arr1to1(arr) {
				let newArr = arr.map((item, index) => {
					return {
						...item,
						isChecked: false,
					}
				})
				return newArr;
			},


		}
	}
</script>
<style scoped>
	.djs-box {
		width: 1000px;
		height: 680px;
		margin: 50px auto;
		border: 1px solid blueviolet;
	}

	.topBox {
		margin: 0 auto 0px;
		padding: 10px 0 20px;
		background: black;
		color: #fff;
	}

	.dajianshi {
		width: 98%;
		height: 520px;
		margin: 20px auto 0;
	}

	.box {
		width: 50%;
		height: 100%;
		margin: 0 auto;
		overflow-y: auto;
		background: #fed;
		padding-left: 15px;
		text-align: center;
		box-sizing: border-box;
	}
</style>

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

专栏目标

在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。

提供vue2的一些基本操作：安装、引用，模板使用，computed，watch，生命周期(beforeCreate，created,beforeMount，mounted, beforeUpdate，updated, beforeDestroy，destroyed，activated，deactivated，errorCaptured，components，)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if，v-on，v-pre，v-cloak，v-once，v-model， v-html, v-text, keep-alive，slot-scope， filters, v-bind，.stop, .native, directives，mixin，render，国际化，Vue Router等