molong/vueadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
molong
2026-01-22 10:13:43 +08:00
parent 155ec5c986
commit 1a3f3ecd82
10 changed files with 649 additions and 1060 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/scTable/index.vue
View File

@@ -1,10 +1,45 @@
<template>
<div class="sc-table">
<!-- 表格内容 -->
<div class="sc-table-content" ref="tableContent">
<a-table :columns="tableColumns" :data-source="dataSource" :loading="loading" :pagination="false"
:row-key="rowKey" :row-selection="rowSelection" :scroll="scroll" :bordered="tableSettings.bordered"
:size="tableSettings.size" :show-header="showHeader" :locale="locale" @change="handleTableChange"
@resizeColumn="handleResizeColumn">
<!-- 自定义单元格内容 -->
<template #bodyCell="{ text, record, index, column }">
<!-- 序号列 -->
<template v-if="column.dataIndex === '_index'">
{{ getTableIndex(index) }}
</template>
<!-- 自定义插槽 -->
<template v-else-if="column.slot">
<slot :name="column.slot || column.dataIndex" :text="text" :record="record" :index="index"
:column="column"></slot>
</template>
<!-- 操作列 -->
<template v-else-if="column.dataIndex === '_action'">
<a-space>
<a-button v-for="(action, idx) in actions" :key="idx" type="link" size="small"
:disabled="action.disabled" @click="handleAction(action, record, index)">
{{ action.label }}
</a-button>
</a-space>
</template>
</template>
<!-- 空状态 -->
<template #emptyText>
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="emptyText" />
</template>
</a-table>
</div>
<!-- 工具栏 -->
<div v-if="showToolbar" class="sc-table-tool">
<div class="tool-left">
<!-- 左侧工具栏插槽 -->
<slot name="toolLeft"></slot>
<a-pagination v-bind="pagination">
</a-pagination>
</div>
<div class="tool-right">
<!-- 右侧工具栏插槽 -->
@@ -20,7 +55,7 @@
<!-- 表格设置按钮 -->
<a-tooltip v-if="showColumnSetting" title="表格设置">
<a-popover v-model:open="tableSettingVisible" placement="bottomRight" trigger="click" :width="240">
<a-popover v-model:open="tableSettingVisible" placement="topRight" trigger="click" :width="240">
<template #content>
<div class="table-setting">
<div class="table-setting-header">
@@ -55,7 +90,7 @@
<!-- 列设置按钮 -->
<a-tooltip v-if="showColumnSetting" title="列设置">
<a-popover v-model:open="columnSettingVisible" placement="bottomRight" trigger="click">
<a-popover v-model:open="columnSettingVisible" placement="topRight" trigger="click">
<template #content>
<div class="column-setting">
<div class="column-setting-header">
@@ -85,52 +120,12 @@
</a-tooltip>
</div>
</div>
<!-- 表格内容 -->
<div class="sc-table-content" ref="tableContent">
<a-table :columns="tableColumns" :data-source="dataSource" :loading="loading" :pagination="pagination"
:row-key="rowKey" :row-selection="rowSelection" :scroll="scroll" :bordered="tableSettings.bordered"
:size="tableSettings.size" :show-header="showHeader" :locale="locale" @change="handleTableChange"
@resizeColumn="handleResizeColumn">
<!-- 自定义单元格内容 -->
<template #bodyCell="{ text, record, index, column }">
<!-- 序号列 -->
<template v-if="column.dataIndex === '_index'">
{{ getTableIndex(index) }}
</template>
<!-- 自定义插槽 -->
<template v-else-if="column.slot">
<slot :name="column.slot || column.dataIndex" :text="text" :record="record" :index="index"
:column="column"></slot>
</template>
<!-- 操作列 -->
<template v-else-if="column.dataIndex === '_action'">
<a-space>
<a-button v-for="(action, idx) in actions" :key="idx" type="link" size="small"
:disabled="action.disabled" @click="handleAction(action, record, index)">
{{ action.label }}
</a-button>
</a-space>
</template>
</template>
<!-- 空状态 -->
<template #emptyText>
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="emptyText">
<slot name="empty">
<span>{{ emptyText }}</span>
</slot>
</a-empty>
</template>
</a-table>
</div>
</div>
</template>
<script setup>
import { ref, computed, watch, reactive, useTemplateRef, onMounted } from 'vue'
import { Empty } from 'ant-design-vue'
import { SyncOutlined, HolderOutlined, TableOutlined } from '@ant-design/icons-vue'
defineOptions({
name: 'scTable',
@@ -265,11 +260,7 @@ onMounted(() => {
const updateTableHeight = () => {
let tableHeight = 0
if (props.pagination !== false) {
tableHeight = tableContent.value.clientHeight - 105
} else {
tableHeight = tableContent.value.clientHeight - 65
}
tableHeight = tableContent.value.clientHeight - 56
scroll.value.y = tableHeight
}
@@ -494,7 +485,7 @@ defineExpose({
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #f0f0f0;
padding: 0 10px;
.tool-left,
.tool-right {