<div style="width:80%;height:400px;background-color: green;margin: 0 auto;"></div>在里面写一个table 平铺包括全选checkbox

<think>我们将在绿色容器内创建一个平铺的表格，包括全选checkbox功能。表格将完全填充容器，并且具有表头固定、内容可滚动的特性。同时，我们将实现全选/反选功能。 方案： 1. 使用Flex布局确保表格填满容器 2. 表头固定，表格内容可滚动 3. 第一列添加复选框，表头第一列添加全选复选框 4. 实现全选功能：当全选被选中时，所有行的复选框被选中；当所有行都被选中时，全选被自动选中；部分选中时全选为不确定状态 代码实现：</think>### 在固定容器内创建带全选功能的平铺表格 以下是 4 种在 Vue 中实现带全选功能的平铺表格的解决方案： #### 方案 1：基础全选功能（推荐） ```vue <template> <div class="container"> <div class="table-container"> <div class="table-header"> <div class="checkbox-cell"> <input type="checkbox" v-model="allSelected" :indeterminate="indeterminate" > </div> <div v-for="header in headers" :key="header" class="header-cell"> {{ header }} </div> </div> <div class="table-body"> <div v-for="(row, index) in data" :key="row.id" class="table-row" :class="{ selected: selectedRows.includes(row.id) }" > <div class="checkbox-cell"> <input type="checkbox" v-model="selectedRows" :value="row.id" > </div> <div v-for="(value, key) in row" :key="key" class="table-cell"> {{ value }} </div> </div> </div> </div> </div> </template> <script setup> import { ref, computed } from 'vue'; // 表头和数据 const headers = ref(['项目名称', '负责人', '状态', '截止日期']); const data = ref([ { id: 'P001', name: '电商平台重构', owner: '张三', status: '进行中', deadline: '2023-12-31' }, { id: 'P002', name: '移动端优化', owner: '李四', status: '已完成', deadline: '2023-11-15' }, { id: 'P003', name: '后台管理系统', owner: '王五', status: '未开始', deadline: '2024-01-20' }, { id: 'P004', name: 'API接口开发', owner: '赵六', status: '进行中', deadline: '2023-12-10' }, ]); // 选中的行ID const selectedRows = ref([]); // 全选状态 const allSelected = computed({ get: () => selectedRows.value.length === data.value.length && data.value.length > 0, set: (value) => { selectedRows.value = value ? data.value.map(item => item.id) : []; } }); // 部分选中状态 const indeterminate = computed(() => { return selectedRows.value.length > 0 && selectedRows.value.length < data.value.length; }); </script> <style scoped> .container { width: 80%; height: 400px; background-color: green; margin: 0 auto; padding: 10px; box-sizing: border-box; } .table-container { display: flex; flex-direction: column; height: 100%; background: white; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .table-header { display: flex; background: #2c3e50; color: white; font-weight: bold; } .table-header > div, .table-row > div { flex: 1; padding: 12px 15px; display: flex; align-items: center; } .checkbox-cell { flex: 0 0 50px !important; justify-content: center; } .header-cell { justify-content: center; } .table-body { flex: 1; overflow-y: auto; } .table-row { display: flex; border-bottom: 1px solid #eee; transition: background-color 0.2s; } .table-row:hover { background-color: #f5f7fa; } .table-row.selected { background-color: #e3f2fd; } .table-cell { justify-content: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } input[type="checkbox"] { transform: scale(1.2); cursor: pointer; } </style> ``` #### 方案 2：多选功能增强（带操作栏） ```vue <template> <div class="container"> <div class="action-bar" v-if="selectedRows.length > 0"> <span>已选择 {{ selectedRows.length }} 个项目</span> <button @click="handleDelete">删除</button> <button @click="handleExport">导出</button> <button @click="selectedRows = []">取消选择</button> </div> <div class="table-container"> <!-- 表格结构与方案1类似，添加行操作 --> <!-- ... --> <!-- 在表格行中添加操作按钮 --> <div class="table-row" v-for="(row, index) in data" :key="row.id"> <!-- ... --> <div class="action-cell"> <button @click="editRow(row)">编辑</button> <button @click="deleteRow(row.id)">删除</button> </div> </div> </div> </div> </template> <script setup> // ...保持方案1的数据和计算属性 // 操作方法 const handleDelete = () => { data.value = data.value.filter(item => !selectedRows.value.includes(item.id)); selectedRows.value = []; }; const handleExport = () => { const selectedData = data.value.filter(item => selectedRows.value.includes(item.id) ); console.log('导出数据:', selectedData); alert(`导出 ${selectedData.length} 条记录`); }; const deleteRow = (id) => { data.value = data.value.filter(item => item.id !== id); selectedRows.value = selectedRows.value.filter(item => item !== id); }; const editRow = (row) => { console.log('编辑行:', row); // 实际项目中这里会打开编辑模态框 }; </script> <style scoped> .action-bar { background: #e3f2fd; padding: 10px 15px; margin-bottom: 10px; border-radius: 4px; display: flex; align-items: center; gap: 15px; } .action-bar button { padding: 5px 10px; background: #2196f3; color: white; border: none; border-radius: 3px; cursor: pointer; } .action-bar button:hover { background: #0d8bf2; } .action-cell { flex: 0 0 150px !important; justify-content: center; gap: 5px; } .action-cell button { padding: 3px 8px; font-size: 0.85rem; } </style> ``` #### 方案 3：虚拟滚动 + 全选（大数据量优化） ```vue <template> <div class="container"> <div class="table-header"> <!-- 全选复选框 --> <div class="checkbox-cell"> <input type="checkbox" v-model="allSelected" :indeterminate="indeterminate" > </div> <!-- 表头 --> </div> <div class="virtual-body" ref="scrollContainer" @scroll="handleScroll" > <div class="virtual-content" :style="{ height: totalHeight + 'px' }"> <div v-for="index in visibleItems" :key="data[index].id" class="virtual-row" :style="{ top: index * rowHeight + 'px' }" > <!-- 行复选框 --> <div class="checkbox-cell"> <input type="checkbox" v-model="selectedRows" :value="data[index].id" > </div> <!-- 行数据 --> </div> </div> </div> </div> </template> <script setup> import { ref, computed, onMounted } from 'vue'; // 生成大数据 const generateData = () => { const result = []; for (let i = 0; i < 1000; i++) { result.push({ id: `P${String(i+1).padStart(4, '0')}`, name: `项目 ${i+1}`, owner: `负责人 ${String.fromCharCode(65 + (i % 26))}`, status: ['未开始', '进行中', '已完成', '已暂停'][i % 4], deadline: `2023-${String((i % 12) + 1).padStart(2, '0')}-${String((i % 28) + 1).padStart(2, '0')}` }); } return result; }; const data = ref(generateData()); const selectedRows = ref([]); const rowHeight = 40; const startIndex = ref(0); const visibleCount = ref(0); const scrollContainer = ref(null); // 虚拟滚动计算 const totalHeight = computed(() => data.value.length * rowHeight); const visibleItems = computed(() => { const end = Math.min(startIndex.value + visibleCount.value + 5, data.value.length); return Array.from({ length: end - startIndex.value }, (_, i) => startIndex.value + i); }); // 全选计算属性 const allSelected = computed({ get: () => selectedRows.value.length === data.value.length, set: (value) => { selectedRows.value = value ? data.value.map(item => item.id) : []; } }); const indeterminate = computed(() => { return selectedRows.value.length > 0 && selectedRows.value.length < data.value.length; }); onMounted(() => { visibleCount.value = Math.ceil(scrollContainer.value.clientHeight / rowHeight); }); const handleScroll = () => { startIndex.value = Math.floor(scrollContainer.value.scrollTop / rowHeight); }; </script> <style scoped> /* 虚拟滚动样式 */ .virtual-body { height: 100%; overflow-y: auto; position: relative; } .virtual-content { position: relative; } .virtual-row { position: absolute; width: 100%; height: 40px; display: flex; align-items: center; border-bottom: 1px solid #eee; box-sizing: border-box; } /* 其他样式保持方案1 */ </style> ``` #### 方案 4：响应式设计（移动端适配） ```vue <template> <div class="container"> <!-- 桌面视图 --> <div class="desktop-view"> <!-- 全选和表格结构同方案1 --> </div> <!-- 移动视图 --> <div class="mobile-view"> <div class="mobile-select-all"> <input type="checkbox" v-model="allSelected" :indeterminate="indeterminate" > <span>全选</span> </div> <div class="mobile-items"> <div v-for="row in data" :key="row.id" class="mobile-item" :class="{ selected: selectedRows.includes(row.id) }" > <div class="mobile-item-header"> <input type="checkbox" v-model="selectedRows" :value="row.id" > <strong>{{ row.name }}</strong> <span :class="statusClass(row.status)">{{ row.status }}</span> </div> <div class="mobile-item-details"> <div><label>负责人:</label> {{ row.owner }}</div> <div><label>截止日期:</label> {{ row.deadline }}</div> </div> </div> </div> </div> </div> </template> <script setup> // ...保持方案1的数据和计算属性 // 状态样式 const statusClass = (status) => { return { 'status-pending': status === '未开始', 'status-progress': status === '进行中', 'status-completed': status === '已完成', 'status-paused': status === '已暂停' }; }; </script> <style scoped> /* 桌面视图 */ .desktop-view { display: block; } .mobile-view { display: none; } /* 移动端适配 */ @media (max-width: 768px) { .desktop-view { display: none; } .mobile-view { display: block; } .mobile-select-all { padding: 10px 15px; background: #f5f7fa; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #ddd; } .mobile-items { overflow-y: auto; height: calc(100% - 50px); } .mobile-item { padding: 15px; border-bottom: 1px solid #eee; } .mobile-item.selected { background-color: #e3f2fd; } .mobile-item-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .mobile-item-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 0.9rem; } .mobile-item-details label { font-weight: bold; color: #666; } /* 状态标签 */ .status-pending { color: #f57c00; } .status-progress { color: #1976d2; } .status-completed { color: #388e3c; } .status-paused { color: #d32f2f; } } </style> ``` ### 全选功能实现要点 1. **全选状态绑定**： ```vue <input type="checkbox" v-model="allSelected" :indeterminate="indeterminate" > ``` 2. **计算属性实现**： ```javascript const allSelected = computed({ get: () => selectedRows.value.length === data.value.length, set: (value) => { selectedRows.value = value ? data.value.map(item => item.id) : []; } }); ``` 3. **部分选中状态**： ```javascript const indeterminate = computed(() => { return selectedRows.value.length > 0 && selectedRows.value.length < data.value.length; }); ``` 4. **行选择绑定**： ```vue <input type="checkbox" v-model="selectedRows" :value="row.id" > ``` ### 性能优化技巧 1. **大数据量处理**： - 使用虚拟滚动技术只渲染可见区域的行 - 使用 `:key` 绑定唯一标识符提高渲染效率 2. **响应式优化**： - 使用计算属性而不是方法计算状态 - 避免在模板中进行复杂计算 3. **视觉反馈**： - 添加选中行的背景色变化 - 使用悬停效果提高交互体验 - 为不同状态添加颜色标识 ### 方案选择建议 1. **常规需求**：方案1（基础全选功能） 2. **需要操作栏**：方案2（多选功能增强） 3. **大数据量**：方案3（虚拟滚动优化） 4. **移动端优先**：方案4（响应式设计）