DeXun/im-uniapp
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化表格样式

Browse Source
This commit is contained in:
砂糖
2025-07-05 16:48:46 +08:00
parent 00417ba7cc
commit 3b556ce46a
6 changed files with 1299 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
pages/workbench/reportWork/reportWork.vue
View File

@@ -7,52 +7,56 @@
</view>
<!-- 数据列表 -->
<view class="table-container">
<view class="table-header">
<view class="header-cell checkbox">
<u-checkbox v-model="selectAll" @change="handleSelectAll"></u-checkbox>
<view class="table-wrapper">
<scroll-view scroll-x class="table-scroll">
<view class="table-container">
<view class="table-header">
<view class="header-cell checkbox">
<u-checkbox v-model="selectAll" @change="handleSelectAll"></u-checkbox>
</view>
<view class="header-cell">项目代号</view>
<view class="header-cell">项目名称</view>
<view class="header-cell">项目编号</view>
<view class="header-cell">经办人</view>
<view class="header-cell">工作地点</view>
<view class="header-cell">国内/国外</view>
<view class="header-cell">报工时间</view>
</view>
<view class="table-body">
<view
v-for="(item, index) in projectReportList"
:key="item.reportId"
class="table-row"
>
<view class="table-cell checkbox">
<u-checkbox
v-model="item.selected"
@change="handleSelectionChange"
></u-checkbox>
</view>
<view class="table-cell">
<u-tag v-if="!item.projectCode" type="error" text="无"></u-tag>
<u-tag v-else :text="item.projectCode"></u-tag>
</view>
<view class="table-cell">
<text v-if="item.prePay > 0">⭐</text>
<text>{{ item.projectName }}</text>
</view>
<view class="table-cell">{{ item.projectNum }}</view>
<view class="table-cell">
<text>{{ item.nickName }}</text>
<text v-if="item.deptName">({{ item.deptName }})</text>
</view>
<view class="table-cell">{{ item.workPlace }}</view>
<view class="table-cell">
<u-tag :type="item.workType === 0 ? 'primary' : 'warning'" :text="item.workType === 0 ? '国内' : '国外'"></u-tag>
</view>
<view class="table-cell">{{ formatDate(item.createTime) }}</view>
</view>
</view>
</view>
<view class="header-cell">项目代号</view>
<view class="header-cell">项目名称</view>
<view class="header-cell">项目编号</view>
<view class="header-cell">经办人</view>
<view class="header-cell">工作地点</view>
<view class="header-cell">国内/国外</view>
<view class="header-cell">报工时间</view>
</view>
<view class="table-body">
<view
v-for="(item, index) in projectReportList"
:key="item.reportId"
class="table-row"
>
<view class="table-cell checkbox">
<u-checkbox
v-model="item.selected"
@change="handleSelectionChange"
></u-checkbox>
</view>
<view class="table-cell">
<u-tag v-if="!item.projectCode" type="error" text="无"></u-tag>
<u-tag v-else :text="item.projectCode"></u-tag>
</view>
<view class="table-cell">
<text v-if="item.prePay > 0">⭐</text>
<text>{{ item.projectName }}</text>
</view>
<view class="table-cell">{{ item.projectNum }}</view>
<view class="table-cell">
<text>{{ item.nickName }}</text>
<text v-if="item.deptName">({{ item.deptName }})</text>
</view>
<view class="table-cell">{{ item.workPlace }}</view>
<view class="table-cell">
<u-tag :type="item.workType === 0 ? 'primary' : 'warning'" :text="item.workType === 0 ? '国内' : '国外'"></u-tag>
</view>
<view class="table-cell">{{ formatDate(item.createTime) }}</view>
</view>
</view>
</scroll-view>
</view>
<!-- 分页 -->
@@ -414,26 +418,35 @@ export default {
margin-bottom: 20rpx;
}
.table-container {
.table-wrapper {
background-color: #fff;
border-radius: 10rpx;
overflow: hidden;
}
.table-scroll {
width: 100%;
}
.table-container {
min-width: 1400rpx; // 设置最小宽度，确保表格内容不会被压缩
}
.table-header {
display: flex;
background-color: #f8f9fa;
border-bottom: 1rpx solid #e9ecef;
.header-cell {
flex: 1;
width: 200rpx; // 固定列宽
padding: 20rpx 10rpx;
text-align: center;
font-weight: bold;
font-size: 28rpx;
flex-shrink: 0; // 防止列被压缩
&.checkbox {
flex: 0.5;
width: 100rpx; // 复选框列宽度
}
}
}
@@ -448,7 +461,7 @@ export default {
}
.table-cell {
flex: 1;
width: 200rpx; // 固定列宽
padding: 20rpx 10rpx;
text-align: center;
font-size: 26rpx;
@@ -456,9 +469,11 @@ export default {
align-items: center;
justify-content: center;
flex-direction: column;
flex-shrink: 0; // 防止列被压缩
word-break: break-all; // 长文本换行
&.checkbox {
flex: 0.5;
width: 100rpx; // 复选框列宽度
}
}
}