<template>
|
<el-dialog
|
v-model="visible"
|
:title="title"
|
:width="width"
|
:destroy-on-close="true"
|
@close="handleClose"
|
class="dialog-table"
|
>
|
<div class="dialog-table-content">
|
<div class="table-wrapper">
|
<ETable
|
:columns="columns"
|
:table-data="tableData"
|
:loading="loadings"
|
:show-selection="false"
|
:show-operations="false"
|
:height="height"
|
:style="{ minHeight: height }"
|
/>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed } from 'vue'
|
import ETable from '@/components/Table/ETable.vue'
|
|
const props = defineProps({
|
modelValue: Boolean,
|
title: String,
|
width: String,
|
tableData: Array,
|
columns: Array,
|
loading: Boolean,
|
height: [String, Number]
|
})
|
const loadings = computed(() => props.loading || false)
|
const emit = defineEmits(['update:modelValue'])
|
const visible = computed({
|
get: () => props.modelValue,
|
set: (value) => emit('update:modelValue', value)
|
})
|
const handleClose = () => {
|
emit('update:modelValue', false)
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.dialog-table {
|
:deep(.el-dialog) {
|
background-color: #f8f9fa;
|
}
|
|
:deep(.el-dialog__header) {
|
background-color: #f1f3f4;
|
border-bottom: 1px solid #e4e7ed;
|
padding: 20px 24px 16px;
|
|
.el-dialog__title {
|
color: #303133;
|
font-weight: 600;
|
}
|
}
|
|
:deep(.el-dialog__body) {
|
background-color: #f8f9fa;
|
padding: 20px 24px;
|
|
.el-table {
|
background-color: #ffffff;
|
border-radius: 6px;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
|
}
|
|
.el-table th.el-table__cell {
|
background-color: #fafbfc;
|
color: #606266;
|
font-weight: 600;
|
border-bottom: 1px solid #ebeef5;
|
}
|
|
.el-table td.el-table__cell {
|
background-color: #ffffff;
|
border-bottom: 1px solid #f5f7fa;
|
}
|
|
.el-table__row:hover > td {
|
background-color: #f8f9fa !important;
|
}
|
}
|
}
|
|
.dialog-table-content {
|
display: flex;
|
flex-direction: column;
|
min-height: 300px;
|
}
|
|
.table-wrapper {
|
display: flex;
|
flex-direction: column;
|
flex: 1;
|
}
|
|
.empty-state {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
min-height: 300px;
|
background-color: #ffffff;
|
border-radius: 6px;
|
border: 1px dashed #d9d9d9;
|
}
|
|
.pagination-wrapper {
|
margin-top: 20px;
|
display: flex;
|
justify-content: center;
|
padding: 16px 0;
|
background-color: #ffffff;
|
border-radius: 6px;
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
:deep(.el-pagination) {
|
--el-pagination-font-size: 14px;
|
--el-pagination-bg-color: #ffffff;
|
--el-pagination-text-color: #606266;
|
--el-pagination-border-radius: 4px;
|
|
.btn-prev,
|
.btn-next {
|
background-color: #f5f7fa;
|
color: #606266;
|
|
&:hover {
|
color: #409eff;
|
}
|
|
&:disabled {
|
color: #c0c4cc;
|
background-color: #f5f7fa;
|
}
|
}
|
|
.el-pager li {
|
background-color: #f5f7fa;
|
color: #606266;
|
|
&:hover {
|
color: #409eff;
|
}
|
|
&.is-active {
|
background-color: #409eff;
|
color: #ffffff;
|
}
|
}
|
|
.el-pagination__sizes .el-select .el-input__wrapper {
|
background-color: #f5f7fa;
|
}
|
|
.el-pagination__jump .el-input__wrapper {
|
background-color: #f5f7fa;
|
}
|
}
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 768px) {
|
.pagination-wrapper {
|
:deep(.el-pagination) {
|
.el-pagination__sizes,
|
.el-pagination__jump {
|
display: none;
|
}
|
}
|
}
|
}
|
</style>
|
