uniapp+vue3全选、全不选 模板

展示图

代码

<template><view class="container"><!-- 列表项 --><view v-for="item in listData" :key="item.id" class="list-item" @click="toggleSelection(item.id)"><text>{{ item.name }}</text><text class="checkbox">{{ item.checked ? '✓' : '✗' }}</text></view><!-- 全选按钮 --><view class="select-all" @click="toggleAllSelection"><text>{{ isAllChecked ? '取消全选' : '全选' }}</text></view></view>
</template><script setup>import {reactive,computed} from 'vue';// 响应式列表数据const listData = reactive([{id: 1,name: '选项1',checked: false},{id: 2,name: '选项2',checked: false},{id: 3,name: '选项3',checked: false},]);// 计算属性判断是否全选const isAllChecked = computed(() =>listData.every(item => item.checked));// 切换单个选项状态const toggleSelection = (id) => {const item = listData.find(item => item.id === id);if (item) item.checked = !item.checked;};// 切换全选状态const toggleAllSelection = () => {const newValue = !isAllChecked.value;listData.forEach(item => item.checked = newValue);};
</script><style>.container {padding: 20rpx;}.list-item {display: flex;justify-content: space-between;padding: 20rpx;border-bottom: 1rpx solid #eee;}.checkbox {color: #007AFF;margin-left: 20rpx;}.select-all {margin-top: 40rpx;padding: 30rpx;background: #f0f0f0;text-align: center;border-radius: 10rpx;}
</style>

点击提交按钮，打印所选内容

<template><view class="container"><!-- 列表项（原有代码保持不变） --><view v-for="item in listData" :key="item.id" class="list-item"@click="toggleSelection(item.id)"><text>{{ item.name }}</text><text class="checkbox">{{ item.checked ? '✓' : '✗' }}</text></view><!-- 操作区域 --><view class="action-area"><!-- 全选按钮（原有代码保持不变） --><view class="select-all" @click="toggleAllSelection"><text>{{ isAllChecked ? '取消全选' : '全选' }}</text></view><!-- 新增提交按钮 --><view class="submit-btn" @click="submitSelected"><text>提交选中项</text></view></view></view>
</template><script setup>
// 原有导入保持不变
import { reactive, computed } from 'vue';// 响应式数据（原有数据保持不变）
const listData = reactive([{ id: 1, name: '选项1', checked: false },{ id: 2, name: '选项2', checked: false },{ id: 3, name: '选项3', checked: false },
]);// 计算属性（原有计算属性保持不变）
const isAllChecked = computed(() => listData.every(item => item.checked)
);// 原有方法保持不变
const toggleSelection = (id) => {const item = listData.find(item => item.id === id);if (item) item.checked = !item.checked;
};const toggleAllSelection = () => {const newValue = !isAllChecked.value;listData.forEach(item => item.checked = newValue);
};// 新增提交方法
const submitSelected = () => {// 获取选中项const selectedItems = listData.filter(item => item.checked).map(({ id, name }) => ({ id, name }));// 打印到控制台console.log('当前选中项：', selectedItems);// 如果需要显示提示（可选）uni.showToast({title: `已提交${selectedItems.length}项`,icon: 'none'});
};
</script><style>
/* 原有样式保持不变 */
.container {padding: 20rpx;
}.list-item {display: flex;justify-content: space-between;padding: 20rpx;border-bottom: 1rpx solid #eee;
}.checkbox {color: #007AFF;margin-left: 20rpx;
}/* 新增操作区域样式 */
.action-area {margin-top: 40rpx;display: flex;gap: 20rpx;
}.select-all,
.submit-btn {flex: 1;padding: 30rpx;background: #f0f0f0;text-align: center;border-radius: 10rpx;
}/* 提交按钮特殊样式 */
.submit-btn {background: #007AFF;color: white;
}
</style>