RISE/school-developer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成基础信息页面开发

Browse Source
This commit is contained in:
RISE
2026-03-19 15:55:37 +08:00
parent 8d8a7db748
commit 71357f9621
1768 changed files with 217566 additions and 693615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
COLUMN_VISIBILITY_SOLUTIONS.md
View File

@@ -1,16 +1,14 @@
# 列显示/隐藏方案对比
## 方案 1：TableColumn 包装组件 ⭐ 推荐
## 方案1：TableColumn 包装组件 ⭐推荐
### 优点
- ✅ 使用简单，只需替换组件名
- ✅ 完全兼容 `el-table-column` 的所有属性和插槽
- ✅ 代码清晰，易于维护
- ✅ 无需修改现有代码结构
### 缺点
- ❌ 需要创建一个新组件
- ❌ 需要在使用的地方 provide `isColumnVisible` 函数
@@ -18,45 +16,43 @@
```vue
<template>
<el-table ref="tableRef">
<TableColumnProvider :is-column-visible="isColumnVisible">
<!-- 替换 el-table-column 为 TableColumn，移除 v-if -->
<TableColumn prop="tied" label="是否退休" width="100" align="center">
<template #default="scope">
<StatusTag :value="scope.row.tied" :options="YES_OR_NO" />
</template>
</TableColumn>
<TableColumn prop="nameNo" label="姓名/工号" min-width="150" align="center" fixed>
<template #default="scope">
<TeacherNameNo :name="scope.row.realName" :no="scope.row.teacherNo" />
</template>
</TableColumn>
</TableColumnProvider>
</el-table>
<el-table ref="tableRef">
<TableColumnProvider :is-column-visible="isColumnVisible">
<!-- 替换 el-table-column 为 TableColumn，移除 v-if -->
<TableColumn prop="tied" label="是否退休" width="100" align="center">
<template #default="scope">
<StatusTag :value="scope.row.tied" :options="YES_OR_NO" />
</template>
</TableColumn>
<TableColumn prop="nameNo" label="姓名/工号" min-width="150" align="center" fixed>
<template #default="scope">
<TeacherNameNo :name="scope.row.realName" :no="scope.row.teacherNo" />
</template>
</TableColumn>
</TableColumnProvider>
</el-table>
</template>
<script setup>
import TableColumnProvider from '/@/components/TableColumn/Provider.vue';
import TableColumn from '/@/components/TableColumn/index.vue';
import TableColumnProvider from '/@/components/TableColumn/Provider.vue'
import TableColumn from '/@/components/TableColumn/index.vue'
const isColumnVisible = (propOrLabel) => {
return tableColumnControlRef.value?.isColumnVisible?.(propOrLabel) ?? true;
};
return tableColumnControlRef.value?.isColumnVisible?.(propOrLabel) ?? true
}
</script>
```
---
## 方案 2：自定义指令 v-column-visible
## 方案2：自定义指令 v-column-visible
### 优点
- ✅ 可以保留 `el-table-column`
- ✅ 使用相对简单
### 缺点
- ❌ 仍然需要在每个列上添加指令
- ❌ 实现较复杂，需要操作 DOM
- ❌ 可能不够优雅
@@ -65,23 +61,26 @@ const isColumnVisible = (propOrLabel) => {
```vue
<template>
<el-table>
<el-table-column v-column-visible="'tied'" prop="tied" label="是否退休" width="100" />
</el-table>
<el-table>
<el-table-column
v-column-visible="'tied'"
prop="tied"
label="是否退休"
width="100"
/>
</el-table>
</template>
```
---
## 方案 3：使用 computed 动态生成列配置
## 方案3：使用 computed 动态生成列配置
### 优点
- ✅ 最彻底，完全控制列的渲染
- ✅ 性能最好（只渲染可见的列）
### 缺点
- ❌ 需要重构现有代码，改动较大
- ❌ 需要将列配置抽离出来
- ❌ 插槽处理较复杂
@@ -90,38 +89,40 @@ const isColumnVisible = (propOrLabel) => {
```vue
<template>
<el-table>
<component v-for="col in visibleColumns" :is="col.component" v-bind="col.props">
<template v-if="col.slots" #[slotName]="slotProps" v-for="(slot, slotName) in col.slots">
<component :is="slot" v-bind="slotProps" />
</template>
</component>
</el-table>
<el-table>
<component
v-for="col in visibleColumns"
:is="col.component"
v-bind="col.props"
>
<template v-if="col.slots" #[slotName]="slotProps" v-for="(slot, slotName) in col.slots">
<component :is="slot" v-bind="slotProps" />
</template>
</component>
</el-table>
</template>
<script setup>
const columns = [
{ prop: 'tied', label: '是否退休', component: 'el-table-column', slots: { default: StatusTag } },
// ...
];
{ prop: 'tied', label: '是否退休', component: 'el-table-column', slots: { default: StatusTag } },
// ...
]
const visibleColumns = computed(() => {
return columns.filter((col) => isColumnVisible(col.prop || col.label));
});
return columns.filter(col => isColumnVisible(col.prop || col.label))
})
</script>
```
---
## 方案 4：在 el-table 层面使用 provide + 自动处理
## 方案4：在 el-table 层面使用 provide + 自动处理
### 优点
- ✅ 在表格层面统一处理
- ✅ 子组件自动继承
### 缺点
- ❌ 实现最复杂
- ❌ 需要修改 Element Plus 的渲染逻辑
- ❌ 可能影响性能
@@ -130,23 +131,21 @@ const visibleColumns = computed(() => {
## 推荐方案
**推荐使用方案 1（TableColumn 包装组件）**，因为：
**推荐使用方案1（TableColumn 包装组件）**，因为：
1. 使用最简单，只需替换组件名
2. 完全兼容现有代码
3. 易于维护和理解
4. 性能良好
## 迁移步骤（方案 1）
## 迁移步骤（方案1）
1. 导入组件：
```vue
import TableColumnProvider from '/@/components/TableColumn/Provider.vue' import TableColumn from '/@/components/TableColumn/index.vue'
import TableColumnProvider from '/@/components/TableColumn/Provider.vue'
import TableColumn from '/@/components/TableColumn/index.vue'
```
2. 用 `TableColumnProvider` 包裹所有列，并传入 `isColumnVisible`：
```vue
<TableColumnProvider :is-column-visible="isColumnVisible">
<!-- 所有列 -->
@@ -154,7 +153,6 @@ import TableColumnProvider from '/@/components/TableColumn/Provider.vue' import
```
3. 将所有 `el-table-column` 替换为 `TableColumn`，并移除 `v-if`：
```vue
<!-- 之前 -->
<el-table-column v-if="isColumnVisible('tied')" prop="tied" label="是否退休" />
@@ -162,3 +160,4 @@ import TableColumnProvider from '/@/components/TableColumn/Provider.vue' import
<!-- 之后 -->
<TableColumn prop="tied" label="是否退休" />
```