表格

src/components/table/index.vue

@@ -0,0 +1,127 @@
+<template>
+    <el-table
+        ref="tableRef"
+        class="ba-data-table w100"
+        header-cell-class-name="table-header-cell"
+        :data="tableStore.table.data"
+        :row-key="tableStore.pk"
+        :border="true"
+        v-loading="tableStore.table.loading"
+        stripe
+        @selection-change="onSelectionChange"
+        v-bind="$attrs"
+    >
+        <!-- Column 组件内部是 el-table-column -->
+        <Column
+            :attr="item"
+            :key="key + '-column'"
+            v-for="(item, key) in tableStore.table.column"
+        >
+            <!-- tableStore 预设的列 render 方案 -->
+            <template v-if="item.render" #default="scope">
+                <FieldRender
+                    :field="item"
+                    :row="scope.row"
+                    :column="scope.column"
+                    :index="scope.$index"
+                    :key="
+                        key +
+                        '-' +
+                        scope.$index +
+                        '-' +
+                        item.render +
+                        '-' +
+                        (item.prop ? '-' + item.prop + '-' + scope.row[item.prop] : '')
+                    "
+                />
+            </template>
+        </Column>
+        <slot name="columnAppend"></slot>
+    </el-table>
+    <div v-if="props.pagination" class="table-pagination">
+        <el-pagination
+            :currentPage="tableStore.table.params!.pageNum"
+            :page-size="tableStore.table.params!.pageSize"
+            :page-sizes="pageSizes"
+            background
+            :layout="config.layout.shrink ? 'prev, next, jumper' : 'sizes,total, ->, prev, pager, next, jumper'"
+            :total="tableStore.table.total"
+            @size-change="onTableSizeChange"
+            @current-change="onTableCurrentChange"
+        ></el-pagination>
+    </div>
+    <slot name="footer"></slot>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, inject, computed } from 'vue'
+import type { ElTable, TableInstance } from 'element-plus'
+import FieldRender from '@/components/table/fieldRender/index.vue'
+import Column from '@/components/table/column/index.vue'
+import { useConfig } from '@/stores/config'
+import type TableStoreClass from '@/utils/tableStore'
+
+const config = useConfig()
+const tableRef = ref<TableInstance>()
+const tableStore = inject('tableStore') as TableStoreClass
+
+interface Props extends /* @vue-ignore */ Partial<InstanceType<typeof ElTable>> {
+    pagination?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+    pagination: true
+})
+
+const onTableSizeChange = (val: number) => {
+    tableStore.onTableAction('page-size-change', { size: val })
+}
+
+const onTableCurrentChange = (val: number) => {
+    tableStore.onTableAction('current-page-change', { page: val })
+}
+
+const pageSizes = computed(() => {
+    let defaultSizes = [10, 20, 50, 100]
+    if (tableStore.table.params!.pageSize) {
+        if (!defaultSizes.includes(tableStore.table.params!.pageSize)) {
+            defaultSizes.push(tableStore.table.params!.pageSize)
+        }
+    }
+    return defaultSizes
+})
+
+
+/*
+ * 记录选择的项
+ */
+const onSelectionChange = (selection: TableRow[]) => {
+    tableStore.onTableAction('selection-change', selection)
+}
+
+const getRef = () => {
+    return tableRef.value
+}
+
+defineExpose({
+    getRef
+})
+</script>
+
+<style scoped lang="scss">
+.ba-data-table :deep(.el-button + .el-button) {
+    margin-left: 6px;
+}
+.ba-data-table :deep(.table-header-cell) .cell {
+    color: var(--el-text-color-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.table-pagination {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    background-color: var(--ba-bg-color-overlay);
+    padding: 13px 15px;
+}
+</style>