0.0.18

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dk-vui",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "dk-vui",
   "private": false,
   "author": "blryli",

packages/Page/src/index.vue

@@ -2,17 +2,18 @@
 // 分为列表页和表单页，默认是列表页
 defineProps({
   edit: Boolean, // 是否是表单页
+  footerAlign: { type: String, default: 'center' }, // 底部区域对齐方式
 })
 const leftSlot = useSlots().left
 
 </script>
 
 <template>
-  <div class="v-page" :class="{ 'is--full': !edit }">
+  <div class="v-page" :class="{ 'is--full': !edit, 'is--edit': edit }">
     <template v-if="edit">
       <slot />
-      <el-affix position="bottom" :offset="0" class="w-full">
-        <div class="v-page__footer">
+      <el-affix position="bottom" :offset="0" class="w-full v-page--affix">
+        <div class="v-page__footer" :style="{'justify-content': footerAlign}">
           <slot name="footer" />
         </div>
       </el-affix>
@@ -37,6 +38,16 @@ const leftSlot = useSlots().left
     overflow: hidden;
   }
 
+  &.is--edit{
+    padding-bottom: 0;
+  }
+
+  &--affix{
+    .el-affix--fixed{
+      right: 0;
+    }
+  }
+
   &__body {
     position: relative;
     height: 100%;
@@ -70,7 +81,6 @@ const leftSlot = useSlots().left
     padding: 8px 15px;
     border: 1px solid #e8eaec;
     border-bottom: 0;
-    border-radius: 6px 6px 0 0;
     overflow: hidden;
   }
 

packages/Table/src/config.js

@@ -21,7 +21,7 @@ export const gridConfig = {
   pagerConfig: {
     pageNum: 1,
     pageSize: 20,
-    pageSizes: [5, 20, 50, 100, 200, 500]
+    pageSizes: [20, 50, 100, 200, 500]
   },
   proxyConfig: {
     seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）

packages/Table/src/index.vue

@@ -2,10 +2,10 @@
 import XEUtils from 'xe-utils'
 import { gridConfig } from "./config";
 import { ArrowUpBold } from '@element-plus/icons-vue';
+import { nextTick } from 'vue';
 
 // 插槽处理
 let slots = computed(() => [...new Set(Object.keys(useSlots()).concat(['toolbar_btns']))])
-console.log('slots', slots.value)
 
 // 搜索表单处理
 const attrs = XEUtils.clone(XEUtils.merge({}, gridConfig, useAttrs()), true)
@@ -107,7 +107,7 @@ const handleScroll = async ({ scrollTop, isY }) => {
   if (isY) {
     offsetHeight.value = Math.min(scrollTop, headerHeight.value)
   }
-  if(!scrollTop) {
+  if (!scrollTop) {
     offsetHeight.value = 0
     return
   }
@@ -134,6 +134,10 @@ const headerResize = async ({ height }) => {
 const tableLoad = ({ height }) => {
   if (!scrollHideForm) return
   contentHeight.value = height
+  nextTick(() => {
+    const body = contentRef?.value.querySelector('.vxe-table--body-wrapper')
+    console.log('body', body)
+  })
 }
 
 const toTop = () => {
@@ -176,4 +180,6 @@ defineExpose({ getForm, setForm, setFormField, resetForm, query, getQueryForm, r
   </div>
 </template>
 
-<style lang="scss">@import './table.scss';</style>
+<style lang="scss">
+@import './table.scss';
+</style>

packages/Table/src/table.scss

@@ -73,15 +73,15 @@
     position: absolute;
     width: 30px;
     height: 30px;
-    line-height: 30px;
+    line-height: 34px;
     text-align: center;
     background-color: #999;
     right: 10px;
-    bottom: 70px;
+    bottom: 54px;
     z-index: 10;
     border-radius: 20px;
     cursor: pointer;
-    transition: all .2;
+    transition: all .2s;
     opacity: .4;
     &:hover{
       opacity: .8;

src/App.vue

@@ -24,4 +24,17 @@ body,
 * {
   box-sizing: border-box;
 }
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #c0c0c0;
+  border-radius: 3px;
+}
 </style>

src/components/HelloWorld.vue

@@ -1,5 +1,5 @@
 <template>
-  <VPage>
+  <VPage edit>
     <template #left>
       <div class="p-2 text-sm">信诚网络</div>
       <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"
@@ -44,6 +44,10 @@
         <el-button>批量编辑</el-button>
       </template>
     </VTable>
+    <template #footer>
+      <el-button>返 回</el-button>
+      <el-button type="primary">保 存</el-button>
+    </template>
   </VPage>
 </template>