记一次el-checkbox包裹一层div，点击div勾选复选框，点击复选框却没反应的bug

<template> <el-checkbox-group v-model="checkList"> <el-checkbox v-for="(item, index) in arr" :key="index" :label="item.nodeName" :disabled="item.disabled" > {{ dt(item, 'name') }} </el-checkbox> </el-checkbox-group> </template> <script lang="ts" setup> import { computed, defineEmits, defineProps } from 'vue'; import { getI18n } from '@/util/i18n'; const { dt } = getI18n(); const props = defineProps<{ value: string[]; arr: { nodeName: string; name: string; disabled?: boolean }; }>(); const emits = defineEmits(['update:value']); const checkList = computed({ get() { return props.value; }, set(value) { emits('update:value', value); }, }); </script> <style scoped lang="less"> .el-checkbox-group { width: 100%; .el-checkbox { padding-left: 14px; width: 100%; margin-right: 0; margin-bottom: 4px; white-space: unset; height: max-content; :deep(.el-checkbox__label) { padding-top: 4px; padding-bottom: 4px; } } } </style> 这是MultipleChoiceOfRegions的代码，这是多选模式

<template> <el-table :data="tableData" style="width: 100%"> <el-table-column type="selection" width="55"> <template #header> <el-checkbox v-model="allSelected" @change="toggleAllSelection" /> </template> <template #default="scope"> <el-checkbox v-model="scope.row.selected" /> </template> </el-table-column> <el-table-column label="产品名称" width="220"> <template #default="scope"> <div class="product-name-wrapper"> <el-link type="primary" :underline="false" @click="goToProductDetail(scope.row.id)"> <span >{{ scope.row.name }}</span> <span style="color: brown;" >※点击进入详细画面</span> </el-link> </div> </template> </el-table-column> <el-table-column property="categoryName" label="产品分类"width="120"/> <el-table-column property="price" label="产品单价"width="120"/> <el-table-column property="createAt" label="生产日期"width="250"/> <el-table-column property="price" label="单价"width="120"/> <el-table-column property="stock" label="库存"width="120"/> <el-table-column label="购买数量" width="180"> <template #default="scope"> <div class="quantity-control"> <el-input-number v-model="scope.row.number" :min="0" :max="scope.row.stock" size="small" controls-position="right" /> </div> </template> </el-table-column> <el-table-column label="合计" width="120"> <template #default="scope"> {{ formatCurrency(scope.row.price * scope.row.number) }} </template> </el-table-column> <el-table-column label="操作" width="180"> <template #default="scope"> <el-button size="small" @click="handleEdit(scope.$index,scope.row)"> 编辑 </el-button> <el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row)"> 删除 </el-button> </template> </el-table-column> </el-table> <div class="summary"> <span class="summary-label">总金额:</span> <span class="summary-value total-amount">{{ formatCurrency(totalAmount) }}</span> </div> </template> <script setup> const router = useRouter(); const user = "aaa" import productApi from '@/api/products' import { ref, computed, onMounted, watch } from 'vue'; const tableData = ref([]); const goToProductDetail = (productId) => { router.push(`/home/test${productId}`) } const allSelected = ref(false); // 获取商品数据 function getProduct() { productApi.getAll(user).then(res => { tableData.value = res.data.map(item => ({ ...item, number: item.number || 0, selected: false // 添加选中状态字段 })); }); } // 全选/取消全选 const toggleAllSelection = (value) => { tableData.value.forEach(row => { row.selected = value; }); }; // 监听选中状态变化 watch( () => tableData.value.map(row => row.selected), (selectedValues) => { const selectedCount = selectedValues.filter(Boolean).length; allSelected.value = selectedCount === tableData.value.length && selectedCount > 0; }, { deep: true } ); // 计算总金额（只计算选中的商品） const totalAmount = computed(() => { return tableData.value.reduce((sum, row) => { if (row.selected) { const price = parseFloat(row.price) || 0; const number = parseInt(row.number) || 0; return sum + (price * number); } return sum; }, 0); }); const handleEdit = (index, row) => { console.log(index, row) } // 实际删除操作 const handleDelete = (index, row) => { tableData.value.splice(index, 1); }; const formatCurrency = (value) => { const numValue = parseFloat(value); // 先转换为数字 if (isNaN(numValue)) { return '¥0.00'; } return `¥${Math.abs(numValue).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}`; }; onMounted(() => { getProduct(); }); </script> <style> .summary { float: right; margin-top: 50px; margin-right: 500px; } </style> 全选不好使

el-checkbox只点击复选框进行勾选