✨ feat: 合并
This commit is contained in:
砂糖
263
gear-ui3/src/components/GearTable/index.vue
Normal file
263
gear-ui3/src/components/GearTable/index.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<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>
|
||||
|
||||
<el-row>
|
||||
<!-- 自定义操作按钮，左对齐 -->
|
||||
<el-col :span="12">
|
||||
<slot name='actionRow'>
|
||||
<!-- 分页 -->
|
||||
<span style="color: #ccc;"></span>
|
||||
</slot>
|
||||
</el-col>
|
||||
|
||||
<!-- 通用操作工具栏 -->
|
||||
<TableActionToolbar
|
||||
:tools="actionTool"
|
||||
:table-ref="getTableInstance()"
|
||||
:table-data="tableData"
|
||||
:columns="columns"
|
||||
:export-file-name="exportFileName"
|
||||
@fullScreen="handleFullScreen"
|
||||
@refresh="handleRefresh"
|
||||
@export="handleExport"
|
||||
@print="handlePrint"
|
||||
@columnChange="updateColumnsVisibility"
|
||||
/>
|
||||
</el-row>
|
||||
|
||||
<!-- 原生 Table 核心 -->
|
||||
<el-table
|
||||
:ref="tableRef"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
:class="['my-table', customClass]"
|
||||
:data="tableData"
|
||||
>
|
||||
<!-- 透传列定义插槽 -->
|
||||
<template
|
||||
v-for="(column, index) in $attrs.columns || []"
|
||||
v-slot:[`header-${column.prop}`]="scope"
|
||||
>
|
||||
<slot :name="`header-${column.prop}`" v-bind="scope"></slot>
|
||||
</template>
|
||||
<template
|
||||
v-for="(column, index) in $attrs.columns || []"
|
||||
v-slot:[column.prop]="scope"
|
||||
>
|
||||
<slot :name="column.prop" v-bind="scope"></slot>
|
||||
</template>
|
||||
|
||||
<!-- 透传原生内置插槽 -->
|
||||
<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>
|
||||
|
||||
<!-- 透传自定义列插槽 -->
|
||||
<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-column
|
||||
v-for="(column, index) in _columns"
|
||||
v-bind="column"
|
||||
:width="column.width"
|
||||
:prop="column.prop"
|
||||
:align="column.align"
|
||||
:label="column.label"
|
||||
:min-width="column.minWidth"
|
||||
:fixed="column.fixed"
|
||||
:show-overflow-tooltip="column.showOverflowTooltip"
|
||||
:sortable="column.sortable"
|
||||
>
|
||||
<template v-slot="scope">
|
||||
<ColumnRender v-if="column.render" :column="column" :data="scope.row" :render="column.render"/>
|
||||
<Eclipse v-else-if="column.eclipse" :text="scope.row[column.prop]"></Eclipse>
|
||||
<span v-else>{{ scope.row[column.prop] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页插槽 -->
|
||||
<slot name="pagination"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ColumnRender from './ColumnRender.vue';
|
||||
import Eclipse from './renderer/eclipse.vue';
|
||||
import TableActionToolbar from './TableActionToolbar.vue';
|
||||
|
||||
export default {
|
||||
name: "KLPTable",
|
||||
components: {
|
||||
ColumnRender,
|
||||
Eclipse,
|
||||
TableActionToolbar
|
||||
},
|
||||
props: {
|
||||
// 基础扩展属性
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: "加载中..."
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 表格数据
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 列定义
|
||||
customColumns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 选择列
|
||||
selectionColumn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 索引列
|
||||
indexColumn: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 操作工具
|
||||
actionTool: {
|
||||
type: Array,
|
||||
default: () => ['fullScreen', 'export', 'setting']
|
||||
},
|
||||
// 导出文件名
|
||||
exportFileName: {
|
||||
type: String,
|
||||
default: '表格数据'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableRef: "myTableRef",
|
||||
columns: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
_columns() {
|
||||
return this.columns.filter(col => col.show);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
customColumns: {
|
||||
handler(newVal) {
|
||||
console.log(newVal, this.customColumns, '自定义列');
|
||||
this.columns = newVal.map(col => ({...col, show: true}));
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取表格实例
|
||||
getTableInstance() {
|
||||
return this.$refs[this.tableRef];
|
||||
},
|
||||
// 透传原生方法
|
||||
clearSelection() {
|
||||
const table = this.getTableInstance();
|
||||
if (table && table.clearSelection) {
|
||||
table.clearSelection();
|
||||
}
|
||||
},
|
||||
toggleRowSelection(row, selected) {
|
||||
const table = this.getTableInstance();
|
||||
if (table && table.toggleRowSelection) {
|
||||
table.toggleRowSelection(row, selected);
|
||||
}
|
||||
},
|
||||
// 操作处理方法（可被覆盖或扩展）
|
||||
handleFullScreen() {
|
||||
this.$emit('fullScreen');
|
||||
},
|
||||
handleRefresh() {
|
||||
this.$emit('refresh');
|
||||
},
|
||||
handleExport() {
|
||||
this.$emit('export');
|
||||
},
|
||||
handlePrint() {
|
||||
this.$emit('print');
|
||||
},
|
||||
// handleSetting() {
|
||||
// this.$emit('setting');
|
||||
// },
|
||||
updateColumnsVisibility(changes) {
|
||||
// 更新列的hidden属性
|
||||
changes.forEach(change => {
|
||||
const column = this.columns.find(col => col.prop === change.prop);
|
||||
if (column) {
|
||||
column.show = !column.show;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log("KLPTable 初始化完成，原生实例：", this.getTableInstance());
|
||||
}
|
||||
};
|
||||
</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;
|
||||
}
|
||||
|
||||
.my-table {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user