From 0796eebe3520fafb0ac5d36ee584af81506d7e9c Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期六, 20 九月 2025 14:05:52 +0800
Subject: [PATCH] 2025.9.20 数据产品（待完成）
---
src/components/table/FYTable.vue | 102 ++++++++++++++++++++++++++++++++++++++------------
1 files changed, 77 insertions(+), 25 deletions(-)
diff --git a/src/components/table/FYTable.vue b/src/components/table/FYTable.vue
index bec9d06..2590983 100644
--- a/src/components/table/FYTable.vue
+++ b/src/components/table/FYTable.vue
@@ -1,10 +1,10 @@
<template>
<el-row ref="searchRef">
<FYSearchBar @search="onSearch">
- <template #options>
+ <template #options v-if="$slots.options">
<slot name="options"></slot>
</template>
- <template #buttons>
+ <template #buttons v-if="$slots.buttons">
<slot name="buttons"></slot>
</template>
</FYSearchBar>
@@ -28,12 +28,19 @@
<slot name="options-expand2"></slot>
</div>
<el-table
+ v-bind="$attrs"
+ ref="tableRef"
:data="tableData"
v-loading="loading"
table-layout="fixed"
:row-class-name="tableRowClassName"
:height="tableHeight"
:size="fontSize"
+ @cell-click="cellClick"
+ :cell-class-name="cellClassName"
+ @paste="handlePaste"
+ @sort-change="handleSortChange"
+ :show-overflow-tooltip="true"
border
>
<slot name="table-column" :size="fontSize"></slot>
@@ -62,8 +69,10 @@
* 浣跨敤鏃堕渶瑕佸湪<slot #options>涓坊鍔犺嚜瀹氫箟鏌ヨ閫夐」锛屽湪<slot #table-column>涓坊鍔犺嚜瀹氫箟琛ㄦ牸鍒楋紝鍚屾椂瀹炵幇瑙﹀彂鍑芥暟search
*/
export default {
+ inject: ['contentMaxHeight'],
props: {
rowClassName: undefined,
+ cellClassName: Function || String,
pagination: {
type: Boolean,
default: true
@@ -72,6 +81,23 @@
size: {
type: String,
default: 'default'
+ },
+ data: {
+ type: Array,
+ default: () => []
+ },
+ totalCount: {
+ type: Number,
+ default: 0
+ },
+ defaultPageSize: {
+ type: Number,
+ default: 20
+ },
+ // 棰濆鐨勯珮搴︼紝鐢ㄤ簬璁＄畻琛ㄦ牸楂樺害
+ extraHeight: {
+ type: Number,
+ default: 0
}
},
data() {
@@ -80,12 +106,12 @@
tableData: [],
total: 0,
currentPage: 1,
- pageSize: 20,
+ pageSize: this.defaultPageSize,
loading: false,
fontSize: 'default'
};
},
- emits: ['search'],
+ emits: ['search', 'cellClick', 'tablePaste', 'sortChange'],
watch: {
currentPage(nValue, oValue) {
if (nValue != oValue) {
@@ -104,24 +130,26 @@
}
},
immediate: true
- }
- },
- computed: {
- cTableHeight() {
- if (this.$refs.searchRef) {
- const h1 = this.$refs.searchRef.$el.offsetHeight;
- const h2 = this.$refs.paginationRef ? this.$refs.paginationRef.$el.offsetHeight : 0;
- const h3 = this.$refs.expandRef.$el.offsetHeight;
- const h4 = this.$refs.expand2Ref.offsetHeight;
-
- const h = h1 + h2 + h3 + h4;
- // return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
- return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
- } else {
- return '500';
+ },
+ data(nValue, oValue) {
+ if (nValue != oValue) {
+ this.tableData = nValue;
+ }
+ },
+ totalCount(nValue, oValue) {
+ if (nValue != oValue) {
+ this.total = nValue;
+ }
+ },
+ extraHeight: {
+ handler(nValue, oValue) {
+ if (nValue != oValue) {
+ this.tableHeight = this.calcTableHeight();
+ }
}
}
},
+ computed: {},
methods: {
/**
* 琛ㄦ牸鏁版嵁鏌ヨ锛屼紶閫掍袱缁勫弬鏁帮紝鍒嗛〉淇℃伅鍜屽洖璋冨嚱鏁�
@@ -137,21 +165,30 @@
pageSize: this.pageSize
},
(res) => {
- this.tableData = res.data;
- this.total = res.total ? res.total : 0;
+ if (res) {
+ if (res.data) {
+ this.tableData = res.data;
+ }
+ if (res.total) {
+ this.total = res.total;
+ }
+ }
this.loading = false;
+ this.doLayout();
}
);
},
calcTableHeight() {
const h1 = this.$refs.searchRef.$el.offsetHeight;
- const h2 = this.$refs.paginationRef ? this.$refs.paginationRef.$el.offsetHeight : 0;
+ const h2 = this.$refs.paginationRef
+ ? this.$refs.paginationRef.$el.offsetHeight
+ : 0;
const h3 = this.$refs.expandRef.$el.offsetHeight;
const h4 = this.$refs.expand2Ref.offsetHeight;
- const h = h1 + h2 + h3 + h4;
- // return `calc(100vh - ${h1}px - ${h2}px - var(--el-main-padding) * 2 - var(--el-header-height))`;
- return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
+ const h = h1 + h2 + h3 + h4 + this.extraHeight;
+ return this.contentMaxHeight.value - h + 'px';
+ // return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
},
tableRowClassName({ row }) {
if (this.rowClassName) {
@@ -163,6 +200,21 @@
} else {
return row.extension1 != '0' ? 'online-row' : 'offline-row';
}
+ },
+ cellClick(row, column, cell, event) {
+ this.$emit('cellClick', row, column, cell, event);
+ },
+ handlePaste(event) {
+ this.$emit('tablePaste', event);
+ },
+ doLayout() {
+ this.$refs.tableRef.doLayout();
+ },
+ handleSortChange({ column, prop, order }) {
+ this.$emit('sortChange', { column, prop, order });
+ },
+ clearSort() {
+ this.$refs.tableRef.clearSort();
}
},
mounted() {
--
Gitblit v1.9.3