From 1a73c77e1d14205014f6a77a8954de480d436c0e Mon Sep 17 00:00:00 2001
From: 张诺 <zhang_12370@163.com>
Date: 星期四, 05 六月 2025 16:05:31 +0800
Subject: [PATCH] 联调基础模块信息-》供应商-》客户信息-》煤种信息 采购信息 联调
---
src/components/Table/ETable.vue | 331 +++++++++++++++++++++++++++---------------------------
1 files changed, 167 insertions(+), 164 deletions(-)
diff --git a/src/components/Table/ETable.vue b/src/components/Table/ETable.vue
index b6bc89e..6fc7f1d 100644
--- a/src/components/Table/ETable.vue
+++ b/src/components/Table/ETable.vue
@@ -1,178 +1,169 @@
<template>
- <el-table
- v-loading="loading"
- :data="tableData"
- :border="border"
- :show-selection="showSelection"
- :max-height="maxHeight"
- :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }"
- @selection-change="handleSelectionChange"
- @row-click="handleRowClick"
- @row-dblclick="handleRowDblClick"
- @cell-click="handleCellClick"
- :max-width="maxWidth"
- @export="handleExport"
- >
- <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" />
- <template v-for="col in columns" :key="col.prop">
- <el-table-column
- v-bind="col"
- :show-overflow-tooltip="shouldShowTooltip(col, tableData)"
- :formatter="(row, column, cellValue) => cellValue == null || cellValue === '' ? '--' : cellValue"
- align="center"
- >
- <template v-if="col.slot" #default>
- <slot></slot>
- </template>
- </el-table-column>
- </template>
- <!-- 鎿嶄綔鍒� -->
- <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" 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>-->
- </slot>
+ <el-table v-loading="loading" :data="tableData" :border="border" :show-selection="showSelection" :max-height="maxHeight"
+ :header-cell-style="{ background: '#EBEEF5', color: '#3D3D3D' }" @selection-change="handleSelectionChange"
+ @row-click="handleRowClick" @row-dblclick="handleRowDblClick" @cell-click="handleCellClick" :max-width="maxWidth"
+ @export="handleExport">
+ <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" /> <template
+ v-for="col in columns" :key="col.prop">
+ <el-table-column v-bind="col" :show-overflow-tooltip="shouldShowTooltip(col, tableData)"
+ :formatter="col.formatter || defaultFormatter" align="center">
+ <template v-if="col.slot" #default>
+ <slot></slot>
</template>
</el-table-column>
- </el-table>
- </template>
+ </template>
+ <!-- 鎿嶄綔鍒� -->
+ <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" 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>-->
+ </slot>
+ </template>
+ </el-table-column>
+ </el-table>
+</template>
<script setup>
- import { defineEmits } from 'vue'
- import { ElMessage, ElMessageBox } from 'element-plus'
- const props = defineProps({
- // 鏈�澶у搴�
- maxWidth: {
- type: [String, Number],
- default: 'auto'
- },
- handleCellClick: {
- type: Function,
- default: () => {}
- },
- handleRowClick: {
- type: Function,
- default: () => {}
- },
- handleExport: {
- type: Function,
- default: () => {}
- },
- handleRowDblClick: {
- type: Function,
- default: () => {}
- },
- // 楂樺害
- maxHeight: {
- type: [String, Number],
- default: 'auto'
- },
- // 鍔犺浇鐘舵��
- loading: {
- type: Boolean,
- default: false
- },
- // border
- border: {
- type: Boolean,
- default: false
- },
- // 琛ㄦ牸鏁版嵁
- tableData: {
- type: Array,
- default: () => []
- },
- // 鏄惁鏄剧ず閫夋嫨鍒�
- showSelection: {
- type: Boolean,
- default: true
- },
- // 鏄惁鏄剧ず搴忓彿鍒�
- showIndex: {
- type: Boolean,
- default: true
- },
- // 鍒楅厤缃�
- columns: {
- type: Array,
- default: () => []
- },
- // 鏄惁鏄剧ず鎿嶄綔鍒�
- showOperations: {
- type: Boolean,
- default: true
- },
- // 鎿嶄綔鍒楁爣绛�
- operationsLabel: {
- type: String,
- default: '鎿嶄綔'
- },
- // 鎿嶄綔鍒楀搴�
- operationsWidth: {
- type: [String, Number],
- default: 100
- },
- // 鏄剧ず鍝簺鎿嶄綔鎸夐挳
- operations: {
- type: Array,
- default: () => ['edit', 'delete', 'export']
- },
- // 鍒犻櫎纭淇℃伅
- deleteConfirmText: {
- type: String,
- default: '纭鍒犻櫎璇ヨ褰曪紵'
- }
- })
- // 妫�鏌ュ垪鏄惁闇�瑕佹樉绀簍ooltip
- const shouldShowTooltip = (col, data) => {
+import { defineEmits } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+const props = defineProps({
+ // 鏈�澶у搴�
+ maxWidth: {
+ type: [String, Number],
+ default: 'auto'
+ },
+ handleCellClick: {
+ type: Function,
+ default: () => { }
+ },
+ handleRowClick: {
+ type: Function,
+ default: () => { }
+ },
+ handleExport: {
+ type: Function,
+ default: () => { }
+ },
+ handleRowDblClick: {
+ type: Function,
+ default: () => { }
+ },
+ // 楂樺害
+ maxHeight: {
+ type: [String, Number],
+ default: 'auto'
+ },
+ // 鍔犺浇鐘舵��
+ loading: {
+ type: Boolean,
+ default: false
+ },
+ // border
+ border: {
+ type: Boolean,
+ default: false
+ },
+ // 琛ㄦ牸鏁版嵁
+ tableData: {
+ type: Array,
+ default: () => []
+ },
+ // 鏄惁鏄剧ず閫夋嫨鍒�
+ showSelection: {
+ type: Boolean,
+ default: true
+ },
+ // 鏄惁鏄剧ず搴忓彿鍒�
+ showIndex: {
+ type: Boolean,
+ default: true
+ },
+ // 鍒楅厤缃�
+ columns: {
+ type: Array,
+ default: () => []
+ },
+ // 鏄惁鏄剧ず鎿嶄綔鍒�
+ showOperations: {
+ type: Boolean,
+ default: true
+ },
+ // 鎿嶄綔鍒楁爣绛�
+ operationsLabel: {
+ type: String,
+ default: '鎿嶄綔'
+ },
+ // 鎿嶄綔鍒楀搴�
+ operationsWidth: {
+ type: [String, Number],
+ default: 100
+ },
+ // 鏄剧ず鍝簺鎿嶄綔鎸夐挳
+ operations: {
+ type: Array,
+ default: () => ['edit', 'delete', 'export']
+ },
+ // 鍒犻櫎纭淇℃伅
+ deleteConfirmText: {
+ type: String,
+ default: '纭鍒犻櫎璇ヨ褰曪紵'
+ }
+})
+// 妫�鏌ュ垪鏄惁闇�瑕佹樉绀簍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) => {
+ return cellValue == null || cellValue === '' || cellValue === 0 ? '--' : cellValue;
+};
+
// 澶勭悊閫夋嫨鍙樺寲銆佺紪杈戙�佸垹闄ゅ拰瀵煎嚭鎿嶄綔
- const emit = defineEmits(['selection-change', 'edit', 'delete', 'export'])
- const handleSelectionChange = (selection) => {
- emit('selection-change', selection)
- }
- const handleEdit = (row) => {
- emit('edit', row)
- }
- const handleDelete = (row) => {
- ElMessageBox.confirm(
- props.deleteConfirmText,
- '璀﹀憡',
- {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }
- ).then(() => {
- emit('delete', row)
- }).catch(() => {})
- }
-
- const handleExport = (row) => {
- emit('export', row)
- }
- </script>
+const emit = defineEmits(['selection-change', 'edit', 'delete', 'export'])
+const handleSelectionChange = (selection) => {
+ emit('selection-change', selection)
+}
+const handleEdit = (row) => {
+ emit('edit', row)
+}
+const handleDelete = (row) => {
+ ElMessageBox.confirm(
+ props.deleteConfirmText,
+ '璀﹀憡',
+ {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }
+ ).then(() => {
+ emit('delete', row)
+ }).catch(() => { })
+}
+
+const handleExport = (row) => {
+ emit('export', row)
+}
+</script>
<style scoped>
- .el-table {
+.el-table {
margin: 20px 0 !important;
}
@@ -187,4 +178,16 @@
overflow-x: auto;
}
}
- </style>
\ No newline at end of file
+
+ /* 鏀寔鍦板潃鍒楁崲琛屾樉绀� */
+ :deep(.el-table .cell) {
+ white-space: normal !important;
+ word-break: break-all;
+ line-height: 1.4;
+ }
+
+ /* 涓哄湴鍧�鍒楄缃渶灏忛珮搴︿互瀹圭撼澶氳鏂囨湰 */
+ :deep(.el-table td) {
+ padding: 8px 0;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3