118 lines
2.7 KiB
Markdown
118 lines
2.7 KiB
Markdown
# 表格列优化方案
|
||
|
||
## 🔍 问题分析
|
||
|
||
当前生成的 Vue 管理页面会为数据表的每个字段都生成一列，导致：
|
||
- 列数过多，界面混乱
|
||
- 水平滚动条出现，用户体验差
|
||
- 重要信息被淹没在大量字段中
|
||
|
||
## ✅ 优化方案
|
||
|
||
### 方案1：智能字段过滤（已实现）
|
||
|
||
**过滤规则**：
|
||
- 最多显示 6 列（不包括操作列）
|
||
- 自动过滤掉不重要的字段：
|
||
- `updateTime` - 更新时间（通常不需要显示）
|
||
- `remark` - 备注字段（通常内容较长）
|
||
- `description` - 描述字段（通常内容较长）
|
||
- `content` - 内容字段（通常内容很长）
|
||
|
||
**优先显示字段**：
|
||
1. 主键字段（ID）
|
||
2. 名称/标题类字段
|
||
3. 状态字段
|
||
4. 创建时间
|
||
5. 其他重要业务字段
|
||
|
||
### 方案2：列宽优化
|
||
|
||
**智能列宽设置**：
|
||
```javascript
|
||
// ID列：较窄
|
||
width: 90
|
||
|
||
// 名称/标题列：中等宽度，支持省略号
|
||
width: 150, ellipsis: true
|
||
|
||
// 状态列：较窄
|
||
width: 80
|
||
|
||
// 时间列：固定宽度，格式化显示
|
||
width: 120, customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
|
||
|
||
// 其他列：默认宽度
|
||
width: 120, ellipsis: true
|
||
```
|
||
|
||
### 方案3：可配置的列显示
|
||
|
||
创建了 `columns.config.vue.btl` 模板，支持：
|
||
- 定义所有可用列
|
||
- 设置默认显示的列
|
||
- 运行时动态控制列的显示/隐藏
|
||
|
||
## 🎯 使用建议
|
||
|
||
### 1. 对于字段较多的表
|
||
建议手动调整 `maxColumns` 值：
|
||
```javascript
|
||
var maxColumns = 4; // 减少到4列
|
||
```
|
||
|
||
### 2. 对于特殊业务需求
|
||
可以修改过滤条件，添加特定字段：
|
||
```javascript
|
||
// 添加特定字段到显示列表
|
||
if(field.propertyName == 'yourSpecialField') {
|
||
// 强制显示这个字段
|
||
}
|
||
```
|
||
|
||
### 3. 启用列控制功能
|
||
如果需要用户可以控制列的显示，可以：
|
||
1. 使用 `columns.config.vue.btl` 模板
|
||
2. 添加列显示控制组件
|
||
3. 实现列的动态显示/隐藏
|
||
|
||
## 📋 优化效果
|
||
|
||
### 优化前
|
||
- 显示所有字段（可能10+列）
|
||
- 界面拥挤，需要水平滚动
|
||
- 重要信息不突出
|
||
|
||
### 优化后
|
||
- 最多显示6个重要列
|
||
- 界面清爽，信息重点突出
|
||
- 自动过滤不重要字段
|
||
- 智能列宽设置
|
||
|
||
## 🔧 自定义配置
|
||
|
||
如果需要为特定表自定义列显示，可以：
|
||
|
||
1. **修改过滤条件**：
|
||
```javascript
|
||
// 在模板中添加特定表的处理
|
||
<% if(table.name == 'your_table_name'){ %>
|
||
// 特定表的列配置
|
||
<% } %>
|
||
```
|
||
|
||
2. **调整最大列数**：
|
||
```javascript
|
||
var maxColumns = 8; // 增加到8列
|
||
```
|
||
|
||
3. **添加必显字段**：
|
||
```javascript
|
||
// 某些字段必须显示
|
||
if(field.propertyName == 'importantField') {
|
||
// 不计入maxColumns限制
|
||
}
|
||
```
|
||
|
||
现在生成的表格更加清爽和实用！
|