feat(KLPTable): 增强浮层组件功能并优化表格显示
- 为浮层组件添加列数配置和排除列功能 - 优化浮层位置计算逻辑,防止超出视窗边界 - 调整表格列显示,移除不必要列并添加净重列 - 更新浮层样式,支持网格布局和响应式显示 - 扩展浮层配置项,支持更多自定义选项
This commit is contained in:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user