| | |
| | | :show-selection="showSelection" |
| | | :max-height="maxHeight" |
| | | @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" /> |
| | | <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="col.showOverflowTooltip !== false" |
| | | :show-overflow-tooltip="shouldShowTooltip(col, tableData)" |
| | | :formatter="(row, column, cellValue) => cellValue == null || cellValue === '' ? '--' : cellValue" |
| | | align="center" |
| | | > |
| | | <template v-if="col.slot" #default> |
| | | <slot></slot> |
| | |
| | | </el-table-column> |
| | | </template> |
| | | <!-- 操作列 --> |
| | | <el-table-column v-if="showOperations" :label="operationsLabel" :width="operationsWidth" fixed="right"> |
| | | <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 |
| | |
| | | <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: '确认删除该记录?' |
| | | } |
| | | }) |
| | | // 检查列是否需要显示tooltip |
| | | const shouldShowTooltip = (col, data) => { |
| | | // 如果没有prop,直接返回false |
| | | if (!col.prop) return false; |
| | | // 检查该列在所有数据中是否有非空值 |
| | | return data.some(row => row[col.prop] != null && row[col.prop] !== ''); |
| | | }; |
| | | // 处理选择变化、编辑、删除和导出操作 |
| | | const emit = defineEmits(['selection-change', 'edit', 'delete', 'export']) |
| | | const handleSelectionChange = (selection) => { |
| | | emit('selection-change', selection) |