134 lines
3.7 KiB
Vue
134 lines
3.7 KiB
Vue
|
<template>
|
|||
|
|
<div class="base-table">
|
|||
|
|
<el-table
|
|||
|
|
v-bind="$attrs"
|
|||
|
|
:data="data"
|
|||
|
|
border
|
|||
|
|
stripe
|
|||
|
|
v-loading="loading"
|
|||
|
|
header-cell-class-name="table-header-gray"
|
|||
|
|
>
|
|||
|
|
<template v-for="col in visibleColumns" :key="col.prop">
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
v-if="!col.slot"
|
|||
|
|
v-bind="col"
|
|||
|
|
:prop="col.prop"
|
|||
|
|
:label="col.label"
|
|||
|
|
:min-width="col.minWidth || '120'"
|
|||
|
|
:width="col.width"
|
|||
|
|
:fixed="col.fixed"
|
|||
|
|
show-overflow-tooltip
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
v-else
|
|||
|
|
v-bind="col"
|
|||
|
|
:prop="col.prop"
|
|||
|
|
:label="col.label"
|
|||
|
|
:min-width="col.minWidth || '120'"
|
|||
|
|
:width="col.width"
|
|||
|
|
:fixed="col.fixed"
|
|||
|
|
>
|
|||
|
|
<template #default="scope">
|
|||
|
|
<slot :name="col.prop" :row="scope.row" :index="scope.$index"></slot>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<template #empty>
|
|||
|
|
<el-empty description="暂无数据" />
|
|||
|
|
</template>
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<div v-if="showPagination" class="pagination-container">
|
|||
|
|
<el-pagination
|
|||
|
|
v-bind="paginationConfig"
|
|||
|
|
v-model:current-page="localPage"
|
|||
|
|
v-model:page-size="localLimit"
|
|||
|
|
:total="total"
|
|||
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|||
|
|
@size-change="handleSizeChange"
|
|||
|
|
@current-change="handleCurrentChange"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { computed, ref, watch } from 'vue'
|
|||
|
|
import { usePermissionStore } from '@/stores/permission'
|
|||
|
|
|
|||
|
|
// --- Props 定义 ---
|
|||
|
|
const props = defineProps({
|
|||
|
|
// 数据源
|
|||
|
|
data: { type: Array, default: () => [] },
|
|||
|
|
// 列配置 (核心)
|
|||
|
|
columns: { type: Array as () => any[], required: true },
|
|||
|
|
// 页面编码 (用于权限隔离，如果列名全局唯一可不传，但建议传)
|
|||
|
|
pageCode: { type: String, default: '' },
|
|||
|
|
|
|||
|
|
loading: { type: Boolean, default: false },
|
|||
|
|
total: { type: Number, default: 0 },
|
|||
|
|
showPagination: { type: Boolean, default: true },
|
|||
|
|
page: { type: Number, default: 1 },
|
|||
|
|
limit: { type: Number, default: 10 }
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const emit = defineEmits(['update:page', 'update:limit', 'pagination'])
|
|||
|
|
|
|||
|
|
const permStore = usePermissionStore()
|
|||
|
|
|
|||
|
|
// --- 核心逻辑：计算当前可见的列 ---
|
|||
|
|
const visibleColumns = computed(() => {
|
|||
|
|
return props.columns.filter(col => {
|
|||
|
|
// 1. 获取该列在数据库中对应的 code
|
|||
|
|
// 如果列配置里显式写了 code，就用写的；如果没有，默认认为 prop 就是 code
|
|||
|
|
const permissionKey = col.code || col.prop
|
|||
|
|
|
|||
|
|
// 2. 如果这个列不需要权限控制 (比如序号 index)，可以在配置里加个 ignoreAuth: true
|
|||
|
|
if (col.ignoreAuth) return true
|
|||
|
|
|
|||
|
|
// 3. 问 Store：我有这个权限吗？
|
|||
|
|
// 注意：我们在 PermissionStore 里存的是全局唯一的 code
|
|||
|
|
return permStore.hasColumnPermission(props.pageCode, permissionKey)
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// --- 分页逻辑处理 ---
|
|||
|
|
const localPage = ref(props.page)
|
|||
|
|
const localLimit = ref(props.limit)
|
|||
|
|
|
|||
|
|
watch(() => props.page, (val) => localPage.value = val)
|
|||
|
|
watch(() => props.limit, (val) => localLimit.value = val)
|
|||
|
|
|
|||
|
|
const handleSizeChange = (val: number) => {
|
|||
|
|
emit('update:limit', val)
|
|||
|
|
emit('pagination', { page: localPage.value, limit: val })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleCurrentChange = (val: number) => {
|
|||
|
|
emit('update:page', val)
|
|||
|
|
emit('pagination', { page: val, limit: localLimit.value })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const paginationConfig = {
|
|||
|
|
pageSizes: [10, 20, 50, 100],
|
|||
|
|
background: true
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.pagination-container {
|
|||
|
|
margin-top: 15px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
:deep(.table-header-gray th) {
|
|||
|
|
background-color: #f8f9fb !important;
|
|||
|
|
color: #606266;
|
|||
|
|
font-weight: 600;
|
|||
|
|
height: 45px;
|
|||
|
|
}
|
|||
|
|
</style>
|