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);
        })
      }
    },
相关推荐
鹏多多11 小时前
关于React父组件调用子组件方法forwardRef的详解和案例
前端·javascript·react.js
Ares-Wang12 小时前
Vue2 》》Vue3》》 Render函数 h
javascript
朝与暮12 小时前
《javascript进阶-类(class):构造函数的语法糖》
前端·javascript
Asort12 小时前
JavaScript设计模式(三)——抽象工厂模式 (Abstract Factory)
前端·javascript·设计模式
fcm1913 小时前
(6) tauri之前端框架性能对比
前端·javascript·rust·前端框架·vue·react
王者鳜錸13 小时前
方言普通话识别大模型,支持中英+202种方言识别
java·vue·语音识别
双普拉斯14 小时前
微信小程序通用弹窗组件封装与动画实现
javascript·html5
前端Hardy14 小时前
HTML&CSS: 在线电子签名工具
前端·javascript·canvas
biomooc14 小时前
D3.js 与数据可视化
开发语言·javascript·信息可视化
前端Hardy14 小时前
告别抽象!可视化动画带你学习算法——选择排序
前端·javascript·css