uni-app checkbox的使用实例

最新推荐文章于 2025-03-14 18:06:01 发布

原创最新推荐文章于 2025-03-14 18:06:01 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

uni-app 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了uni-app中checkbox的使用，包括默认样式和多选情况的实现。通过一个实际的物资盘点场景，阐述了如何利用checkbox标记已盘点物资，支持手动和自动勾选功能。

基础知识（详见uni-app官网对于checkbox的介绍）

第一种默认样式

//页面
//可以改变勾选的颜色，以及框的尺寸
  <checkbox-group>
       <label>
            <checkbox value="cb" checked="true" />选中
       </label>
       <label>
             <checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" />未选中
        </label>
 </checkbox-group>

第二种多选

//页面
   <checkbox-group @change="checkboxChange">
       <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
          <view>
              <checkbox :value="item.value" :checked="item.checked" />
          </view>
          <view>{{item.name}}</view>
        </label>
   </checkbox-group>

//JS
export default{
   data(){
    return{
      items:[
        {
         value:1,
         name:"美国"
        },
        {
         value:2,
         name:"英国"
        },
        {
         value:3,
         name:"中国"
        },
        {
         value:4,
         name:"日本"
        },
       ]
     }
   }，
   methods:{
    checkboxChange(e){
      let items=this.items;
      values=e.detail.value;  //[1,3,4]被选中的value组成的数组
     items.forEach(item,index=>{
         if(values.includes(item.value)){
            this.$set(item,'checked',true)   //item 遍历的某个对象，checked这个对象的属性，true值
         }else{
            this.$set(item,'checked',false)
         }
       })
     }
  }

}

实际项目需求：

物资盘点，已经盘点过的物资，可以勾选”已盘“方便，下次单据的时候知道哪些已经处理过了

可以手动勾选”已盘“或者实盘数量改变，”已盘“自动勾选上

//页面
<block v-for="(item,oIndex) in detailList" :key="oIndex">
		<!-- 勾选 -->
		<view class="flex">
			<view style="flex:1; margin-bottom:2px;" >
				<checkbox-group @change="countedChange">
				  <checkbox  :checked="item.counted" :value="item.id+''" @tap="countedInput(item.id)" :disabled="banEdit"/>
				</checkbox-group>
			</view>
			<view style="flex:3;" >{{item.itemName || ''}}</view>
			<view class="flex-twice text-center ">{{item.unitName || ''}}</view>
			<view class="flex-twice text-blue text-center ">{{item.accountQty || 0}}</view>
			<!-- 改变实盘数量 -->
			<view class="flex-twice text-blue text-center " @tap="qtyInput(item,item.id)">{{item.qty || 0}}</view>
		</view>
</block>

//js部分
export default{
   data(){
     return{
      detailList:[],
    }
  },
  methods:{
   //已盘勾选
		countedInput(id){
			let countedId=id
			this.detailList=this.detailList.map(item=>{
				if(this.counted && item.id==countedId){   //item.id 选中
					item.counted=true
				}else if(!this.counted && item.id==countedId){  undefined  取消选中
					item.counted=false
				}
				return item
			}) 
		},
		countedChange(e){
			if(this.banEdit){
				return;
			}
			 this.counted=e.detail.value[0]     //item.id 或者undefined   
		},
  }
}