uniapp自定义圆形勾选框和全选框

自定义圆形勾选框和全选框

原来用的checkbox

cpp 复制代码
	dataList: [],//数据列表
	allChecked: false,//是否全选
	selectList: [],//选中的id列表
	selectNameList: [],//选中的name列表
cpp 复制代码
	<!--checkbox start -->
	<!--单选-->
	<view class="li" v-for="(item,index) in  dataList" :key="index" @click="btnApprove(item)">
		<checkbox :checked="selectList.length > 0 && selectList.indexOf(item.enrollId) !== -1"
	                    class="w30 h64 lh-54"
	                    @click.stop="btnClickSpeciality(item, '')"
	                    style="transform: scale(0.8) translateY(0px);margin-left:15px;"
	                    />
	</view>
	
	<!--全选-->
	<view class="h70" v-if="dataList.length > 0"></view>
	<view class="bottomStatus" v-if="dataList.length > 0">
		<checkbox :checked="allChecked" @click="handleSelectionChange(!allChecked)" />全选
		
		<view class="refuse">驳回</view>
		<view class="sure">同意</view>
	</view>
	<!--checkbox end -->
cpp 复制代码
	<!--自定义checkbox start -->
	<!--自定义圆形勾选框 单选-->
	<view v-if="curValue==0" style="margin-right: 15px;">
		<!--已选中-->
		<view class="el-radio__input is-checked" v-if="selectList.length > 0 && selectList.indexOf(item.enrollId) !== -1" @click.stop="btnClickSpeciality(item, '')">
              <text class="iconfont icon-success" style="color: white;"></text>
		</view>
        <!--未选中-->
		<view class="el-radio__input" v-else @click.stop="btnClickSpeciality(item, '')"></view>
	</view>


	<view class="h70" v-if="dataList.length > 0"></view>
    <view class="bottomStatus" v-if="dataList.length > 0">
    <!--自定义圆形勾选框 多选-->
   	 <view style="margin-right: 15px;">
      <!--已选中-->
        <view class="el-radio__input is-checked" v-if="allChecked" @click="handleSelectionChange(!allChecked)">
   	     <text class="iconfont icon-success" style="color: white;"></text>
        </view>
      <!--未选中-->
        <view class="el-radio__input" v-else @click="handleSelectionChange(!allChecked)"></view>
        </view>
        全选
     </view>

     <view class="refuse" @click="btnAllRefuse">驳回</view>
     <view class="sure" @click="btnSure">同意</view>
    </view>
	<!--自定义checkbox end -->
cpp 复制代码
  // 点击单选
    btnClickSpeciality(row) {
      let index = this.selectList.indexOf(row.enrollId);
      if (index !== -1) {
        this.selectList.splice(index, 1);
        this.selectNameList.splice(index, 1);
      } else {
        this.selectList.push(row.enrollId);
        this.selectNameList.push(row.studentName)
      }
      this.checkAll();
    },
	 // 全选
    checkAll() {
      if (this.dataList && this.dataList.length > 0) {
        let checkList = this.dataList.filter(a => this.selectList.find(b => a.enrollId == b));
        console.log("checkList===", checkList);

        if (this.dataList.length == checkList.length) {
          this.allChecked = true;
        } else {
          this.allChecked = false;
        }

      } else {
        this.allChecked = false;
      }
    },
     // 点击全选
    handleSelectionChange(e) {
      if (e) {
        let list = this.dataList.filter((a) => !this.selectList.find(b => a.enrollId == b));

        list.map(row => {
          this.btnClickSpeciality(row);
        })
      } else {
        let list = this.dataList.filter((a) => this.selectList.find(b => a.enrollId == b));
        list.map(row => {
          this.btnClickSpeciality(row);
        })
      }
    },
相关推荐
gnip1 小时前
文件操作利器:showOpenFilePicker
前端·javascript
Sui_Network2 小时前
Yotta Labs 选择 Walrus 作为去中心化 AI 存储与工作流管理的专用数据层
大数据·javascript·人工智能·typescript·去中心化·区块链
大家的林语冰2 小时前
Promise 再次进化,ES2025 新增 Promise.try() 静态方法
前端·javascript·ecmascript 6
大家的林语冰2 小时前
如何错误手写 ES2025 新增的 Promise.try() 静态方法
前端·javascript·ecmascript 6
懒大王95273 小时前
uniapp 开发上架 iOS App全流程
uni-app
yuehua_zhang4 小时前
uni app 的app 端调用tts 进行文字转语音
前端·javascript·uni-app
再努力"亿"点点4 小时前
炫酷JavaScript鼠标跟随特效
开发语言·前端·javascript
前端达人4 小时前
从 useEffect 解放出来!异步请求 + 缓存刷新 + 数据更新,React Query全搞定
前端·javascript·react.js·缓存·前端框架
qczg_wxg4 小时前
ReactNative系统组件四
javascript·react native·react.js
小浣熊喜欢揍臭臭5 小时前
uniapp+vue3 微信小程序全屏广告组件功能
微信小程序·uni-app