<think>我们将修改数据显示部分，将表格替换为卡片布局，每个卡片显示一条记录。
卡片结构设计如下：
顶部：序号和问卷标题（一行显示，序号和标题）
中间部分：被测评人、部门、提交状态、总分（分成两行，每行两个信息）
底部：创建时间、提交时间以及操作按钮（操作按钮放在最下面）
移动端适配：卡片宽度100%，并设置合适的间距。
修改步骤：
1. 移除原有的el
-table，改为使用div和el
-card来展示每一条数据。
2. 使用v
-for循环tableData，为每一条数据生成一个卡片。
3. 在卡片内部按照要求布局。
注意：分页部分保持不变。
由于数据量可能较大，我们仍然保留分页功能。
同时，为了在移动端有更好的显示，我们将使用flex布局来排列中间部分的信息。
修改后的代码：</think>我将修改数据显示板块，将表格布局改为卡片布局，使其更适应移动端显示。以下是完整的解决方案：
```vue
<template>
<div class="detail
-container">
<!
-- 索引板块卡片
-->
<el
-card class="index
-card">
<!
-- ...搜索表单保持不变...
-->
</el
-card>
<!
-- 数据显示板块
-->
<el
-card class="data
-card">
<template #header>
<div class="card
-header">
<el
-button
type="primary"
size="small"
:icon="Refresh"
@click="fetchData"
>
刷新数据
</el
-button>
</div>
</template>
<!
-- 数据加载提示
-->
<div v
-if="loading" class="loading
-container">
<el
-icon class="is
-loading" size="24">
<Loading />
</el
-icon>
<span>数据加载中...</span>
</div>
<!
-- 空数据提示
-->
<div v
-else
-if="tableData.length === 0" class="empty
-container">
<el
-empty description="暂无数据" />
</div>
<!
-- 卡片式数据展示
-->
<div v
-else class="data
-cards">
<div
v
-for="(item, index) in tableData"
:key="index"
class="data
-card
-item"
>
<!
-- 顶部：序号和问卷标题
-->
<div class="card
-header">
<div class="card
-index">#{{ item.dcWjId }}</div>
<div class="card
-title">{{ item.dcWjTitle }}</div>
</div>
<!
-- 中间：被测评人、部门、提交状态、总分
-->
<div class="card
-middle">
<div class="card
-row">
<div class="card
-label">被测评人：</div>
<div class="card
-value">{{ item.dcName }}</div>
</div>
<div class="card
-row">
<div class="card
-label">部门：</div>
<div class="card
-value">{{ item.dcDept }}</div>
</div>
<div class="card
-row">
<div class="card
-label">提交状态：</div>
<div class="card
-value">
<el
-tag
:type="item.state === '1' ? 'success'
: 'info'" size="small">
{{ item.state === '1' ? '已提交'
: '未提交' }}
</el
-tag>
</div>
</div>
<div class="card
-row">
<div class="card
-label">总分：</div>
<div class="card
-value">{{ item.score || '
--' }}</div>
</div>
</div>
<!
-- 底部：创建时间、提交时间和操作按钮
-->
<div class="card
-bottom">
<div class="time
-row">
<div class="time
-label">创建时间：</div>
<div class="time
-value">{{ formatTime(item.createTime) }}</div>
</div>
<div class="time
-row">
<div class="time
-label">提交时间：</div>
<div class="time
-value">{{ formatTime(item.updateTime) }}</div>
</div>
<div class="action
-buttons">
<el
-button
size="small"
type="primary"
@click="handleView(item)"
class="action
-button"
>
{{ item.state === '1' ? '查看'
: '编辑' }}
</el
-button>
</div>
</div>
</div>
</div>
<!
-- 分页控件
-->
<div class="pagination
-container">
<el
-pagination
v
-model
:current
-page="pagination.current"
v
-model
:page
-size="pagination.size"
:page
-sizes="[5, 10, 20, 50]"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total"
@size
-change="handleSizeChange"
@current
-change="handlePageChange"
/>
</div>
</el
-card>
</div>
</template>
<script setup>
// 确保正确导入所有 Vue 函数
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import {
Document,
User,
OfficeBuilding,
Search,
Refresh,
Loading
} from '@element
-plus/icons
-vue';
import { ElMessage } from 'element
-plus';
import { useRouter } from 'vue
-router';
const router = useRouter();
// ...其他变量和函数保持不变...
// 时间格式化函数
const formatTime = (timeString) => {
if (!timeString) return '
--';
try {
// 尝试解析时间字符串
const date = new Date(timeString);
// 如果解析失败，返回原始字符串
if (isNaN(date.getTime())) return timeString;
// 格式化为 YYYY
-MM
-DD HH
:mm
:ss
return date.toLocaleString('zh
-CN', {
year
: 'numeric',
month
: '2
-digit',
day
: '2
-digit',
hour
: '2
-digit',
minute
: '2
-digit',
second
: '2
-digit',
hour12
: false
}).replace(/\//g, '
-');
} catch (e) {
console.error('时间格式化失败
:', e);
return timeString;
}
};
// ...其他函数保持不变...
</script>
<style scoped>
/* 移动端适配样式 */
.detail
-container {
padding
: 12px;
display
: flex;
flex
-direction
: column;
gap
: 16px;
}
/* 卡片容器样式 */
.data
-cards {
display
: grid;
grid
-template
-columns
: repeat(
auto-fill, minmax(300px, 1fr));
gap
: 16px;
}
/* 单个数据卡片样式 */
.data
-card
-item {
border
: 1px solid #ebeef5;
border
-radius
: 8px;
padding
: 16px;
background
-color
: #fff;
box
-shadow
: 0 2px 12px rgba(0, 0, 0, 0.05);
transition
: all 0.3s;
display
: flex;
flex
-direction
: column;
gap
: 12px;
}
.data
-card
-item
:hover {
box
-shadow
: 0 4px 16px rgba(0, 0, 0, 0.1);
transform
: translateY(
-2px);
}
/* 卡片顶部样式 */
.card
-header {
display
: flex;
align
-items
: center;
gap
: 10px;
padding
-bottom
: 12px;
border
-bottom
: 1px solid #f0f0f0;
}
.card
-index {
font
-size
: 18px;
font
-weight
: bold;
color
: #409eff;
min
-width
: 40px;
}
.card
-title {
font
-size
: 16px;
font
-weight
: 600;
color
: #1a1a1a;
flex
: 1;
overflow: hidden;
text
-overflow: ellipsis;
display
: -webkit
-box;
-webkit
-line
-clamp
: 2;
-webkit
-box
-orient
: vertical;
}
/* 卡片中部样式 */
.card
-middle {
display
: flex;
flex
-direction
: column;
gap
: 8px;
flex
: 1;
}
.card
-row {
display
: flex;
align
-items
: center;
gap
: 8px;
}
.card
-label {
font
-size
: 14px;
color
: #606266;
min
-width
: 70px;
}
.card
-value {
font
-size
: 14px;
color
: #303133;
flex
: 1;
overflow: hidden;
text
-overflow: ellipsis;
white
-space
: nowrap;
}
/* 卡片底部样式 */
.card
-bottom {
display
: flex;
flex
-direction
: column;
gap
: 8px;
padding
-top
: 12px;
border
-top
: 1px dashed #f0f0f0;
}
.time
-row {
display
: flex;
align
-items
: center;
gap
: 8px;
}
.time
-label {
font
-size
: 13px;
color
: #909399;
min
-width
: 70px;
}
.time
-value {
font
-size
: 13px;
color
: #606266;
flex
: 1;
}
.action
-buttons {
display
: flex;
justify
-content
: flex
-end;
margin
-top
: 8px;
}
.action
-button {
width
: 100%;
}
/* 加载状态样式 */
.loading
-container {
display
: flex;
flex
-direction
: column;
align
-items
: center;
justify
-content
: center;
padding
: 40px 0;
gap
: 16px;
}
.is
-loading {
animation
: rotating 2s linear infinite;
}
@keyframes rotating {
0% {
transform
: rotate(0deg);
}
100% {
transform
: rotate(360deg);
}
}
/* 空数据样式 */
.empty
-container {
padding
: 40px 0;
}
/* 分页样式 */
.pagination
-container {
margin
-top
: 20px;
display
: flex;
justify
-content
: center;
}
/* 响应式设计 */
@media (max
-width
: 768px) {
.data
-cards {
grid
-template
-columns
: 1fr;
}
.card
-header {
flex
-direction
: column;
align
-items
: flex
-start;
gap
: 6px;
}
.card
-title {
font
-size
: 15px;
}
.card
-label, .time
-label {
min
-width
: 60px;
}
.action
-button {
width
: 100%;
}
}
@media (max
-width
: 480px) {
.detail
-container {
padding
: 8px;
}
.data
-card
-item {
padding
: 12px;
}
.card
-title {
font
-size
: 14px;
}
.card
-label, .card
-value,
.time
-label, .time
-value {
font
-size
: 13px;
}
.pagination
-container {
overflow-x
: auto;
}
}
</style>
```
### 主要修改说明：
1. **卡片布局设计**：
- 将表格布局改为卡片布局，使用网格布局(`grid`)展示数据
- 每个卡片包含三个部分：顶部、中间和底部
- 添加悬停效果提升用户体验
2. **卡片结构划分**：
```html
<!
-- 单个数据卡片
-->
<div class="data
-card
-item">
<!
-- 顶部：序号和问卷标题
-->
<div class="card
-header">
<div class="card
-index">#{{ item.dcWjId }}</div>
<div class="card
-title">{{ item.dcWjTitle }}</div>
</div>
<!
-- 中间：被测评人、部门、提交状态、总分
-->
<div class="card
-middle">
<!
-- 四行信息展示
-->
</div>
<!
-- 底部：创建时间、提交时间和操作按钮
-->
<div class="card
-bottom">
<!
-- 时间信息和操作按钮
-->
</div>
</div>
```
3. **响应式设计优化**：
- 移动端单列显示
- 小屏幕设备上的字体大小调整
- 标签和值的布局优化
4. **时间格式化函数**：
```javascript
const formatTime = (timeString) => {
if (!timeString) return '
--';
try {
// 尝试解析时间字符串
const date = new Date(timeString);
// 格式化为 YYYY
-MM
-DD HH
:mm
:ss
return date.toLocaleString('zh
-CN', {
year
: 'numeric',
month
: '2
-digit',
day
: '2
-digit',
hour
: '2
-digit',
minute
: '2
-digit',
second
: '2
-digit',
hour12
: false
}).replace(/\//g, '
-');
} catch (e) {
return timeString;
}
};
```
5. **加载状态和空状态处理**：
```html
<!
-- 加载状态
-->
<div v
-if="loading" class="loading
-container">
<el
-icon class="is
-loading" size="24">
<Loading />
</el
-icon>
<span>数据加载中...</span>
</div>
<!
-- 空数据状态
-->
<div v
-else
-if="tableData.length === 0" class="empty
-container">
<el
-empty description="暂无数据" />
</div>
```
### 卡片布局特点：
1. **顶部区域**：
- 序号使用醒目的蓝色和加粗字体
- 问卷标题支持多行显示，最多2行
- 添加底部边框分隔
2. **中间区域**：
- 四行信息展示：被测评人、部门、提交状态和总分
- 标签和值使用弹性布局对齐
- 提交状态使用标签样式展示
3. **底部区域**：
- 创建时间和提交时间使用较小字体
- 时间标签使用灰色字体
- 操作按钮根据状态显示"编辑"或"查看"
4. **响应式设计**：
- 桌面端：多列网格布局
- 平板端：单列布局
- 手机端：优化字体大小和间距
### 实现原理：
1. **网格布局**：
```css
.data
-cards {
display
: grid;
grid
-template
-columns
: repeat(
auto-fill, minmax(300px, 1fr));
gap
: 16px;
}
```
- 使用CSS Grid创建自适应网格
- `
auto-fill`自动填充可用空间
- `minmax(300px, 1fr)`设置最小宽度300px，最大1fr
2. **卡片内部结构**：
```css
.data
-card
-item {
display
: flex;
flex
-direction
: column;
gap
: 12px;
}
```
- 使用Flexbox垂直布局
- `gap`属性统一设置间距
3. **文本截断处理**：
```css
.card
-title {
overflow: hidden;
text
-overflow: ellipsis;
display
: -webkit
-box;
-webkit
-line
-clamp
: 2;
-webkit
-box
-orient
: vertical;
}
```
- 支持多行文本截断
- 最多显示2行
4. **时间格式化**：
- 使用`toLocaleString`方法本地化时间显示
- 替换斜杠为短横线
- 添加错误处理防止解析失败
### 注意事项：
1. **性能优化**：
- 对于大量数据，使用分页加载
- 考虑使用虚拟滚动技术
2. **数据加载状态**：
- 显示加载动画提升用户体验
- 空数据状态使用Element Plus的Empty组件
3. **操作按钮**：
- 根据提交状态显示不同的按钮文本
- 已提交状态显示"查看"，未提交显示"编辑"
4. **响应式断点**：
- 根据实际设备调整响应式断点
- 使用媒体查询优化不同屏幕尺寸的显示效果
本文介绍了一个关于网页中table标签滚动条不显示的问题，并提供了解决方案：通过在外层包裹一层div并设置overflow-y:auto及固定高度来实现滚动效果。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
