<template>
|
<el-dialog
|
v-model="visible"
|
:title="title"
|
:width="width"
|
:destroy-on-close="true"
|
@close="handleClose"
|
class="dialog-table"
|
>
|
<ETable
|
:columns="columns"
|
:table-data="tableData"
|
:loading="loading"
|
:show-selection="false"
|
:show-operations="false"
|
/>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { computed } from 'vue'
|
import ETable from '@/components/Table/ETable.vue'
|
|
const props = defineProps({
|
// 弹窗控制
|
modelValue: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: '数据表格'
|
},
|
width: {
|
type: String,
|
default: '80%'
|
},
|
|
// 表格数据
|
tableData: {
|
type: Array,
|
default: () => []
|
},
|
columns: {
|
type: Array,
|
default: () => []
|
},
|
loading: {
|
type: Boolean,
|
default: 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;
|
}
|
}
|
}
|
</style>
|
