在uniapp实现checked点击复选框和当前行都可以切换

代码实现:

<template>
  <template #default>
    <view class="home">
      <!-- 移除wd-checkbox-group -->
      <wd-card 
        v-for="item in advanceData" 
        :key="item.Fid" 
        custom-class="card"
        @click="handleRowClick(item.Fid)">
        <template #title>
          <view class="title">
            <view class="checkboxList">
              <!-- 修改复选框绑定方式 -->
              <wd-checkbox 
                shape="square" 
                :modelValue="checkedList.includes(item.Fid)"
                @click.stop="handleCheckboxClick(item.Fid)">
              </wd-checkbox>
              <view>{{ item.name }}</view>
            </view>
            <uv-button 
              type="primary" 
              size="mini" 
              text="详情" 
              shape="circle"
              @click.stop="voucherDetails(item.Fid)">
            </uv-button>
          </view>
        </template>
      </wd-card>
    </view>
  </template>
</template>

<script lang="ts" setup>
const advanceData = ref([])//数据
const checkedList = ref([]);
const checkedAll = ref(false);
const checkset = ref([])
//  全选事件触发
const checkAllVoucher = (val) => {
  if (val.value) {
    let checkFid = advanceData.value.map((item) => item.Fid)
    checkset.value = checkFid
    console.log(checkset.value, 'checkset.value')

  } else {
    checkset.value = []
  }
  console.log(advanceData.value)
  console.log(checkset.value, 'checkset')
}
// 复选框逻辑
const handleCheckboxClick = (Fid: string) => {
  toggleSelection(Fid);
};

const handleRowClick = (Fid: string) => {
  toggleSelection(Fid);
};

const toggleSelection = (Fid: string) => {
  const index = checkedList.value.indexOf(Fid);
  if (index > -1) {
    checkedList.value.splice(index, 1);
  } else {
    checkedList.value.push(Fid);
  }
  
  // 更新全选状态
  checkedAll.value = checkedList.value.length === advanceData.value.length;
};

</script>

换个写法依旧可以，核心在于去除wd-checkbox-group和 <wd-checkbox :modelValue="checkedList.includes(item.Fid)" shape="square"></wd-checkbox>

/**
     * 全选按钮事件
     */
    const checkAllChange = () =>{
        checkedList.value=checkedAll.value?record.value.map((item)=>item.Fid):[];
    }

     /**
     * 选择按钮点击事件
     */
    const checkChanged = () => {
        if(checkedList.value.length != record.value.length)
            checkedAll.value=false;
        else
            checkedAll.value=true;
    }

    /**
     * 数据行点击事件
     */
    const handleRowClick = (val) =>{
        var checkedItems=checkedList.value.filter(t=>t==val);
        if(checkedItems.length==0)
            checkedList.value.push(val);
        else
            checkedList.value.splice(checkedList.value.indexOf(val),1);
    }

1.事件统一处理：

添加handleRowClick处理整行点击
添加handleCheckboxClick处理复选框点击
两者都调用统一的toggleSelection方法

2.事件冒泡控制：

复选框使用@click.stop阻止事件冒泡
详情按钮使用@click.stop避免触发行点击

3.选中状态同步：

使用:modelValue="checkedList.includes(item.Fid)"确保视图实时更新
修改状态后自动更新全选状态

4.为什么使用modelValue不用v-model

v-model 是指令语法,本身不能直接使用判断条件，而 modelValue 是该指令在组件内部使用的默认 prop 名称。

• v-model 实际上是两个属性的语法糖：
  • :model-value（绑定值）
  • @update:model-value（监听值变化）

<!-- v-model 写法 -->
<wd-checkbox v-model="value" />

<!-- 等价于 -->
<wd-checkbox :model-value="value" @update:model-value="value = $event" />

<wd-checkbox 
  shape="square" 
  :v-model="checkedList.includes(item.Fid)"
  @click.stop="handleCheckboxClick(item.Fid)">
</wd-checkbox>

• :model-value 只负责传递当前状态（是否选中）
• @update:model-value 负责处理状态变化（选中/取消选中）
• 通过 toggleSelection方法来实际维护 checkedList 数组