feat(KLPTable): 增强浮层组件功能并优化表格显示

- 为浮层组件添加列数配置和排除列功能
- 优化浮层位置计算逻辑,防止超出视窗边界
- 调整表格列显示,移除不必要列并添加净重列
- 更新浮层样式,支持网格布局和响应式显示
- 扩展浮层配置项,支持更多自定义选项
This commit is contained in:
2026-04-18 10:23:24 +08:00
parent 3ad3fd2fee
commit dd27069b4c
3 changed files with 87 additions and 28 deletions

View File

@@ -18,7 +18,7 @@
<slot name="append" v-bind="scope"></slot>
</template>
<!-- 3. 透传自定义列插槽直接接收<el-table-column> 嵌套的情况 -->
<!-- 3. 透传"自定义列"插槽直接接收<el-table-column> 嵌套的情况 -->
<slot v-bind:tableRef="tableRef"></slot>
<el-table-column v-if="selectionColumn" type="selection" width="55" align="center"></el-table-column>
@@ -27,7 +27,7 @@
</el-table>
<!-- 浮层组件 -->
<KLPTableFloatLayer v-if="floatLayer" :columns="floatLayerColumns" :data="hoveredRow" :tooltipVisible="tooltipVisible"
:tooltipStyle="tooltipStyle" />
:tooltipStyle="tooltipStyle" :columnCount="floatLayerColumnCount" />
</div>
<!-- 扩展层可后续统一添加分页如与 MyPagination 组件联动 -->
<slot name="pagination"></slot>
@@ -78,7 +78,9 @@ export default {
type: Object,
default: () => ({
columns: [],
title: '详细信息'
title: '详细信息',
columnCount: 2,
excludeColumns: ['action']
})
},
height: {
@@ -101,11 +103,16 @@ export default {
},
computed: {
floatLayerColumns() {
console.log(this.floatLayerConfig?.columns?.length > 1)
if (this.floatLayerConfig?.columns?.length > 1) {
return this.floatLayerConfig.columns
}
return this.columns;
},
floatLayerColumnCount() {
return this.floatLayerConfig?.columnCount || 2;
},
excludeColumns() {
return this.floatLayerConfig?.excludeColumns || ['action'];
}
},
methods: {
@@ -157,6 +164,15 @@ export default {
// 浮层相关
handleCellEnter(row, column, cell, event) {
if (!row || !event) return
// 检查是否是排除的列(操作列等)
const excludeColumns = this.excludeColumns
if (excludeColumns.includes(column.property)) {
this.tooltipVisible = false
this.hoveredRow = null
return
}
this.hoveredRow = row
this.tooltipVisible = true
this.updateTooltipPosition(event)