vue/js 怎么实现单选、多选、全选、全不选、

最新推荐文章于 2024-07-19 11:16:36 发布

dyzf

最新推荐文章于 2024-07-19 11:16:36 发布

阅读量3.4k

点赞数

文章标签： js vue 全选单选多选

本文链接：https://blog.csdn.net/weixin_42652176/article/details/90666842

版权

一：做成的效果图
在这里插入图片描述
二：代码展示
1：html

2：js
加粗样式

       <div class="add-follow" v-cloak>
			<div class="my-top">
				<div class="mui-input-row mui-checkbox mui-left">
				   <label>全选</label>
				  <input type="checkbox" :checked="followSelectedList.length === arrData.length" @change="handleCheckAllChange">
				</div>
			</div>
			<div class="my-content">
				<div v-for="(val, key) in arrData" :key="key">
					<div class="my-content-box">
						<div class="mui-input-row mui-checkbox mui-left">
						   <label>{{val.userName}}</label>
						  <input type="checkbox" :checked="followSelectedList.indexOf(val.userId) >= 0"
								 @change="handleCheckChange(val.userId,val.userName)">
						</div>
						<div class="two-box">
							{{val.roleName}}
						</div>
					</div>
					<hr v-if="key != arrData.length-1">
				</div>
			</div>
			<div class="my-fix">
				<div class="my-fix-btn">
					<div class="my-fix-btn-yxz">
						已选择{{followSelectedList.length}}人
					</div>
					<div class="my-fix-btn-qd" @tap="send">
						确定
					</div>
				</div>
			</div>
		</div>

             handleCheckChange (userId,userName) {
				let idx = vm.followSelectedList.indexOf(userId);
				let idx2 = vm.followSelectedListValue.indexOf(userName);
				idx >= 0 ? vm.followSelectedList.splice(idx, 1) : vm.followSelectedList.push(userId);
				idx2 >= 0 ? vm.followSelectedListValue.splice(idx2, 1) : vm.followSelectedListValue.push(userName);
              },
				handleCheckAllChange () {
					vm.checkAll = !vm.checkAll;
					if (vm.checkAll) {
						vm.followSelectedList = [];
						vm.followSelectedListValue = [];
						vm.arrData.forEach(val => {
							vm.followSelectedList.push(val.userId);
							vm.followSelectedListValue.push(val.userName);
						}, vm);
						return;
					}
					vm.followSelectedList = [];
					vm.followSelectedListValue = [];
				},