From fc7c94d3c56433945e19de8719fdd1f7bb6a8fa2 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 26 六月 2025 09:43:31 +0800
Subject: [PATCH] 1.修改组件
---
src/components/Table/ETable.vue | 65 +++++++++++++++++++-------------
1 files changed, 39 insertions(+), 26 deletions(-)
diff --git a/src/components/Table/ETable.vue b/src/components/Table/ETable.vue
index 13d2dda..66ca0b9 100644
--- a/src/components/Table/ETable.vue
+++ b/src/components/Table/ETable.vue
@@ -2,7 +2,7 @@
v-loading="loading"
:data="tableData"
:border="border"
- :show-selection="showSelection"
+ :show-selection="showSelection"
:max-height="maxHeight"
:header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }"
@selection-change="handleSelectionChange"
@@ -15,12 +15,16 @@
:show-overflow-tooltip="showOverflowTooltip"
ref="tableRef"
:row-key="rowKey"
- style="width: 100%"
+ style="width: 100%;"
>
<el-table-column v-if="showSelection" type="selection" width="55" align="center" />
- <el-table-column v-if="showIndex" label="搴忓彿" type="index" width="60" align="center" />
+ <el-table-column v-if="showIndex" label="搴忓彿" width="60" align="center" fixed="left">
+ <template #default="scope">
+ {{ getRowIndex(scope.$index) }}
+ </template>
+ </el-table-column>
<template v-for="col in columns" :key="col.prop">
- <el-table-column v-bind="col" :show-overflow-tooltip="shouldShowTooltip(col, tableData)"
+ <el-table-column v-bind="col"
:formatter="col.formatter || defaultFormatter" align="center">
<template v-if="col.slot" #default="scope">
<slot :name="col.prop" :row="scope.row" :column="scope.column" :index="scope.$index"></slot>
@@ -28,18 +32,15 @@
</el-table-column>
</template>
<!-- 鎿嶄綔鍒� -->
- <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" fixed="right" align="center">
+ <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" :show-overflow-tooltip="false" fixed="right" align="center">
<template #default="scope">
<slot name="operations" :row="scope.row">
<el-button v-if="operations.includes('edit')" link type="primary" size="small"
@click="handleEdit(scope.row)">缂栬緫</el-button>
- <!-- <el-button-->
- <!-- v-if="operations.includes('delete')"-->
- <!-- link-->
- <!-- type="danger"-->
- <!-- size="small"-->
- <!-- @click="handleDelete(scope.row)"-->
- <!-- >鍒犻櫎</el-button>-->
+ <el-button v-if="operations.includes('viewRow')" link type="primary" size="small"
+ @click="handleView(scope.row)">鏌ョ湅</el-button>
+ <el-button v-if="operations.includes('viewFile')" link type="primary" size="small"
+ @click="handleViewFile(scope.row)">鏌ョ湅闄勪欢</el-button>
</slot>
</template>
</el-table-column>
@@ -139,24 +140,22 @@
rowKey: {
type: String,
default: 'id'
- },
- showOverflowTooltip: {
+ }, showOverflowTooltip: {
type: Boolean,
default: true
+ },
+ // 褰撳墠椤电爜
+ currentPage: {
+ type: Number,
+ default: 1
+ },
+ // 姣忛〉澶у皬
+ pageSize: {
+ type: Number,
+ default: 10
}
})
const tableRef = ref(null)
-// 妫�鏌ュ垪鏄惁闇�瑕佹樉绀簍ooltip
-const shouldShowTooltip = (col, data) => {
- // 濡傛灉鍒楅厤缃腑鏄庣‘璁剧疆浜唖howOverflowTooltip锛屼娇鐢ㄨ璁剧疆
- if (col.hasOwnProperty('showOverflowTooltip')) {
- return col.showOverflowTooltip;
- }
- // 濡傛灉娌℃湁prop锛岀洿鎺ヨ繑鍥瀎alse
- if (!col.prop) return false;
- // 妫�鏌ヨ鍒楀湪鎵�鏈夋暟鎹腑鏄惁鏈夐潪绌哄�硷紝榛樿鏄剧ずtooltip
- return data.some(row => row[col.prop] != null && row[col.prop] !== '');
-};
// 榛樿鐨勬牸寮忓寲鍑芥暟
const defaultFormatter = (row, column, cellValue) => {
@@ -164,12 +163,18 @@
};
// 澶勭悊閫夋嫨鍙樺寲銆佺紪杈戙�佸垹闄ゅ拰瀵煎嚭鎿嶄綔
-const emit = defineEmits(['selection-change', 'edit', 'delete', 'export'])
+const emit = defineEmits(['selection-change', 'edit', 'delete', 'export', 'viewRow', 'viewFile'])
const handleSelectionChange = (selection) => {
emit('selection-change', selection)
}
const handleEdit = (row) => {
emit('edit', row)
+}
+const handleView = (row) => {
+ emit('viewRow', row)
+}
+const handleViewFile = (row) => {
+ emit('viewFile', row)
}
const handleDelete = (row) => {
ElMessageBox.confirm(
@@ -188,6 +193,11 @@
const handleExport = (row) => {
emit('export', row)
}
+
+// 璁＄畻鍒嗛〉搴忓彿
+const getRowIndex = (index) => {
+ return (props.currentPage - 1) * props.pageSize + index + 1;
+};
// 姝ｇ‘鐨� toggleRowSelection 鏂规硶锛氶拡瀵瑰崟琛�
const toggleRowSelection = (row, selected) => {
@@ -270,6 +280,9 @@
</script>
<style scoped>
+ :deep(.el-tooltip) {
+ justify-content: center !important;
+ }
.el-table {
margin: 20px 0 !important;
}
--
Gitblit v1.9.3