Initial commit

2026-07-10 10:52:30 +08:00
commit 71a96244da
168 changed files with 9961 additions and 0 deletions
@@ -0,0 +1,88 @@
+<template>
+  <div class="table-wrapper">
+
+    <!-- 表格 -->
+    <el-table :data="data" class="table"
+      :header-cell-style="{ background: '#F2F4F6', color: '#333', 'text-align': 'center' }"
+      :cell-style="{ color: '#666', 'font-size': '13px', 'text-align': 'center' }" v-bind="tableProps"
+      @sort-change="onSortChange">
+      <el-table-column v-for="column in columns" :key="column.prop" v-bind="column">
+        <template slot-scope="scope" >
+          <span v-if="column.needSlot">
+            <slot :row="scope.row" :col="column" :data="scope.row[column.prop]" />
+          </span>
+          <span v-else-if="!column.prop">
+            {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
+          </span>
+          <span v-else>{{ scope.row[column.prop] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div class="page">
+      <!-- 分页 -->
+      <el-pagination v-if="isShowPage" background layout="total, prev, pager, next, sizes, jumper" :total="total"
+        :page-size="pageSize" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" @current-change="onPageChange"
+        @size-change="onPageSizeChange" />
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  props: {
+    // element table支持的props
+    tableProps: Object,
+    // 为v-model准备的
+    // 为.sync准备的
+    currentPage: Number,
+    data: Array,
+    columns: Array,
+    total: {
+      type: Number,
+      default: 0
+    },
+    // 为.sync准备的
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    isShowPage: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    // 改变分页事件
+    onPageChange(currentPage) {
+      // 改变props的方法
+      this.$emit('update:currentPage', currentPage)
+    },
+    // 改变分页条数事件
+    onPageSizeChange(size) {
+      this.$emit('update:pageSize', size)
+    },
+    onSortChange(column) {
+      this.$emit('update:sortBy', column)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.table-wrapper {
+  .table {
+    width: 100%;
+  }
+
+  .page {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>