From e1b028d486713eaf55aaf35fbf334aa568059c0d Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期二, 14 四月 2026 15:46:54 +0800
Subject: [PATCH] 项目复制
---
src/views/components/DataTable.vue | 143 +++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 143 insertions(+), 0 deletions(-)
diff --git a/src/views/components/DataTable.vue b/src/views/components/DataTable.vue
new file mode 100644
index 0000000..d3be3a5
--- /dev/null
+++ b/src/views/components/DataTable.vue
@@ -0,0 +1,143 @@
+<template>
+ <div class="mt-4 mb-2">
+ <el-table
+ :data="showList"
+ table-layout="auto"
+ stripe
+ :empty-text="emptyText"
+ style="width: 100%"
+ @selection-change="handleSelectionChange"
+ >
+ <el-table-column v-if="selectionFlag" :selectable="selectable" type="selection" width="55" />
+ <el-table-column
+ v-for="(item,index) in headers" :key="index"
+ :prop="item.value"
+ :label="item.label"
+ :width="item.width"
+ :align="item.align || 'center'"
+ :sortable="item.sortable"
+ >
+ <template v-if="$slots[`${item.value}_header`]" #header>
+ <slot :name="`${item.value}_header`"></slot>
+ </template>
+ <template v-if="$slots[item.value]" #default="scope">
+ <slot :name="item.value" v-bind="scope"></slot>
+ </template>
+ </el-table-column>
+ </el-table>
+ <el-row class="mt-4" align="middle" justify="end" v-if="paginator">
+ <el-pagination
+ v-model:current-page="page"
+ v-model:page-size="size"
+ :page-sizes="pageSize"
+ background
+ :layout="layout"
+ :total="totalCount || list.length"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
+ </el-row>
+ </div>
+</template>
+
+<script>
+
+export default {
+ data() {
+ return {
+ pageSize: [12, 24, 36, 48],
+ page: 1,
+ size: 12,
+ showList: [],
+ }
+ },
+ props: {
+ filter: {
+ type: Object,
+ default: () => { return { pageNo: 1, pageSize: 12 } }
+ },
+ headers: {
+ type: Array,
+ default: () => []
+ },
+ list: {
+ type: Array,
+ default: () => []
+ },
+ totalCount: {
+ type: Number,
+ default: 0
+ },
+ layout: {
+ type: String,
+ default: 'total, sizes, prev, pager, next, jumper'
+ },
+ selectionFlag: {
+ type: Boolean,
+ default: false
+ },
+ emptyText: {
+ type: String,
+ default: '鏆傛棤鏁版嵁'
+ },
+ paginator: {
+ type: Boolean,
+ default: true
+ },
+ selectable: {
+ type: Function,
+ default: () => { return true }
+ }
+ },
+ watch: {
+ list: {
+ handler() {
+ this.updateShowList()
+ },
+ immediate: true,
+ deep: true
+ },
+ 'filter.page': function(val) {
+ this.page = val
+ },
+ 'filter.size': function(val) {
+ this.size = val
+ }
+ },
+ methods: {
+ handleSizeChange() {
+ this.$emit('update:filter', {
+ ...this.filter,
+ size: this.size
+ })
+ this.updateShowList()
+ },
+ handleCurrentChange() {
+ this.$emit('update:filter', {
+ ...this.filter,
+ page: this.page,
+ })
+ this.updateShowList()
+ },
+ updateShowList() {
+ if (this.paginator) {
+ this.showList = this.list.slice((this.page - 1) * this.size, this.page * this.size)
+ } else {
+ this.showList = this.list
+ }
+ },
+ handleSelectionChange(value) {
+ this.$emit('selectionChange', value)
+ }
+ }
+}
+
+</script>
+
+<style>
+.el-table th.el-table__cell {
+ padding: 12px 0;
+ background-color: #fafafa;
+}
+</style>
+
--
Gitblit v1.8.0