砂糖
dd27069b4c
- 为浮层组件添加列数配置和排除列功能 - 优化浮层位置计算逻辑，防止超出视窗边界 - 调整表格列显示，移除不必要列并添加净重列 - 更新浮层样式，支持网格布局和响应式显示 - 扩展浮层配置项，支持更多自定义选项
248 lines
7.5 KiB
Vue
248 lines
7.5 KiB
Vue
<template>
|
||
<div class="my-table-container">
|
||
<!-- 扩展层：可后续统一添加（如加载动画、导出按钮等） -->
|
||
<div v-if="loading" class="table-loading">
|
||
<el-loading-spinner></el-loading-spinner>
|
||
<p class="loading-text">{{ loadingText || "加载中..." }}</p>
|
||
</div>
|
||
|
||
<div class="el-table-container" ref="elTableWrapper" @mouseleave="handleTableLeave">
|
||
<!-- 原生 Table 核心：透传 props/事件/插槽 -->
|
||
<el-table :ref="tableRef" v-bind="$attrs" v-on="$listeners" :class="['my-table', customClass]"
|
||
@cell-mouse-enter="handleCellEnter" @row-mouseleave="handleRowLeave" :height="height">
|
||
<!-- 2. 透传原生内置插槽（如 empty 空数据插槽、append 底部插槽等） -->
|
||
<template v-slot:empty="scope">
|
||
<slot name="empty" v-bind="scope"></slot>
|
||
</template>
|
||
<template v-slot:append="scope">
|
||
<slot name="append" v-bind="scope"></slot>
|
||
</template>
|
||
|
||
<!-- 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>
|
||
|
||
<el-table-column v-if="indexColumn" type="index" width="55" align="center"></el-table-column>
|
||
</el-table>
|
||
<!-- 浮层组件 -->
|
||
<KLPTableFloatLayer v-if="floatLayer" :columns="floatLayerColumns" :data="hoveredRow" :tooltipVisible="tooltipVisible"
|
||
:tooltipStyle="tooltipStyle" :columnCount="floatLayerColumnCount" />
|
||
</div>
|
||
<!-- 扩展层：可后续统一添加分页（如与 MyPagination 组件联动） -->
|
||
<slot name="pagination"></slot>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import ColumnRender from './ColumnRender.vue';
|
||
import Eclipse from './renderer/eclipse.vue';
|
||
import KLPTableFloatLayer from './FloatLayer/index.vue';
|
||
|
||
export default {
|
||
name: "KLPTable", // 组件名，便于调试和文档生成
|
||
components: {
|
||
ColumnRender,
|
||
Eclipse,
|
||
KLPTableFloatLayer
|
||
},
|
||
props: {
|
||
// 1. 扩展 props：新增原生 Table 没有的属性（如加载状态）
|
||
loading: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
loadingText: {
|
||
type: String,
|
||
default: "加载中..."
|
||
},
|
||
// 2. 兼容原生 class 用法（原生 el-table 支持 class 属性，此处显式接收避免 $attrs 冲突）
|
||
customClass: {
|
||
type: String,
|
||
default: ""
|
||
},
|
||
selectionColumn: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
indexColumn: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// floatLayer：是否显示浮层
|
||
floatLayer: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
floatLayerConfig: {
|
||
type: Object,
|
||
default: () => ({
|
||
columns: [],
|
||
title: '详细信息',
|
||
columnCount: 2,
|
||
excludeColumns: ['action']
|
||
})
|
||
},
|
||
height: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
tableRef: "myTableRef", // 表格 ref，便于后续通过 ref 调用原生方法
|
||
// 浮层相关
|
||
tooltipVisible: false,
|
||
tooltipStyle: {
|
||
top: '0px',
|
||
left: '0px'
|
||
},
|
||
hoveredRow: null,
|
||
columns: []
|
||
};
|
||
},
|
||
computed: {
|
||
floatLayerColumns() {
|
||
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: {
|
||
// 核心方法：净化scope，移除可能导致循环引用的属性
|
||
sanitizeScope(scope) {
|
||
if (!scope) return {};
|
||
// 只保留安全的属性（根据实际需求调整）
|
||
const { row, column, $index, store } = scope;
|
||
// 深拷贝避免引用传递，同时过滤循环引用
|
||
return this.deepClone({ row, column, $index, store });
|
||
},
|
||
// 安全的深拷贝方法（避免JSON.parse/stringify无法处理的类型）
|
||
deepClone(obj) {
|
||
if (obj === null || typeof obj !== "object") return obj;
|
||
if (obj instanceof Date) return new Date(obj);
|
||
if (obj instanceof RegExp) return new RegExp(obj);
|
||
|
||
// 避免处理Vue实例（通常带有循环引用）
|
||
if (obj._isVue) return { _isVue: true };
|
||
|
||
const clone = Array.isArray(obj) ? [] : {};
|
||
for (const key in obj) {
|
||
if (obj.hasOwnProperty(key)) {
|
||
clone[key] = this.deepClone(obj[key]);
|
||
}
|
||
}
|
||
return clone;
|
||
},
|
||
// 3. 透传原生 Table 实例方法（如 clearSelection、doLayout 等）
|
||
// 业务层可通过 this.$refs.myTable.xxx() 调用原生方法
|
||
getTableInstance() {
|
||
return this.$refs[this.tableRef];
|
||
},
|
||
// 示例：透传原生 clearSelection 方法
|
||
clearSelection() {
|
||
const table = this.getTableInstance();
|
||
if (table && table.clearSelection) {
|
||
table.clearSelection();
|
||
}
|
||
},
|
||
// 可根据需要扩展更多原生方法（如 toggleRowSelection、sort 等）
|
||
toggleRowSelection(row, selected) {
|
||
const table = this.getTableInstance();
|
||
if (table && table.toggleRowSelection) {
|
||
table.toggleRowSelection(row, selected);
|
||
}
|
||
},
|
||
|
||
// 浮层相关
|
||
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)
|
||
},
|
||
handleRowLeave() {
|
||
this.tooltipVisible = false
|
||
this.hoveredRow = null
|
||
},
|
||
handleTableLeave() {
|
||
this.tooltipVisible = false
|
||
this.hoveredRow = null
|
||
},
|
||
updateTooltipPosition(event) {
|
||
this.$nextTick(() => {
|
||
const wrapper = this.$refs.elTableWrapper
|
||
if (!wrapper) return
|
||
|
||
const wrapperRect = wrapper.getBoundingClientRect()
|
||
let left = event.clientX - wrapperRect.left + 16
|
||
let top = event.clientY - wrapperRect.top + 12
|
||
|
||
this.tooltipStyle = {
|
||
top: `${top}px`,
|
||
left: `${left}px`
|
||
}
|
||
})
|
||
},
|
||
},
|
||
mounted() {
|
||
// 扩展点：后续可统一添加初始化逻辑（如权限控制、默认排序等）
|
||
// console.log("MyTable 初始化完成，原生实例：", this.getTableInstance());
|
||
// 几个特殊的列，需要特殊处理 index, selection, action
|
||
const columns = this.$slots.default.filter(item => item.tag?.includes('ElTableColumn') && item.componentInstance && item.componentInstance.columnConfig && item.componentOptions && item.componentOptions.propsData).map(item => ({
|
||
...item.componentInstance.columnConfig,
|
||
...item.componentOptions.propsData
|
||
}))
|
||
this.columns = columns
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.my-table-container {
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
/* 扩展样式：加载状态遮罩（后续可统一调整） */
|
||
.table-loading {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 10;
|
||
}
|
||
|
||
.loading-text {
|
||
margin-top: 12px;
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 原生 Table 样式兼容：避免封装层影响原生样式 */
|
||
.my-table {
|
||
width: 100%;
|
||
}
|
||
</style> |