From b0e84af3dafe8984b69858c4420b5611c9b58f30 Mon Sep 17 00:00:00 2001
From: CD配唱片 <CD配唱片>
Date: 星期四, 24 四月 2025 15:17:00 +0800
Subject: [PATCH] 提交工艺路线的表格触底加载
---
src/components/HxlhTable/index.vue | 388 +++++++++++++++++++++++++++++-------------------------
1 files changed, 209 insertions(+), 179 deletions(-)
diff --git a/src/components/HxlhTable/index.vue b/src/components/HxlhTable/index.vue
index 53c7fab..34bc34e 100644
--- a/src/components/HxlhTable/index.vue
+++ b/src/components/HxlhTable/index.vue
@@ -1,180 +1,185 @@
<template>
- <div class="hxlh-table">
- <vxe-grid
- ref="vxeTable"
- :show-header-overflow="true"
- :show-overflow="showOverflow"
- :stripe="true"
- :border="true"
- :show-footer="showfooter"
- header-align="center"
- highlight-hover-column
- highlight-hover-row
- resizable
- size="small"
- :loading="loading"
- :pager-config="tablePage"
- :form-config="tableForm"
- :columns="columns"
- :column-config="{resizable: true}"
- :data.sync="data"
- :checkbox-config="checkboxConfig"
- :height="height"
- :max-height="maxHeight"
- :toolbar="toolbar"
- :reload-data="reloadData"
- :footer-method="footerMethod"
- :footer-cell-class-name="footerCellClassName"
- :scroll-x="{enabled: true}"
- :scroll-y="{enabled: true}"
- row-height="auto"
- :expand-config="expandConfig"
- :tree-config="treeConfig"
- :row-style="rowStyle"
- @sort-change="sortChange"
- @page-change="pagerChange"
- @form-submit="findList"
- @checkbox-change="checkChange"
- @checkbox-all="checkChangeall"
- >
- <template v-slot:buttons="row">
- <slot name="buttons" v-bind="row"/>
- </template>
- <template #expandContent="{ row }">
- <vxe-grid v-bind="subGridOptions" :data="row.subList">
- </vxe-grid>
- </template>
- <template v-slot:status="row" >
- <slot name="status" v-bind="row"/>
- </template>
- <template v-slot:mark="row" >
- <slot name="mark" v-bind="row"/>
- </template>
- </vxe-grid>
- </div>
- </template>
-
+ <div class="hxlh-table">
+ <vxe-grid
+ ref="vxeTable"
+ :show-header-overflow="true"
+ :show-overflow="showOverflow"
+ :stripe="true"
+ :border="true"
+ :show-footer="showfooter"
+ header-align="center"
+ highlight-hover-column
+ highlight-hover-row
+ resizable
+ size="small"
+ :loading="loading"
+ :pager-config="tablePage"
+ :form-config="tableForm"
+ :columns="columns"
+ :column-config="{ resizable: true }"
+ :data.sync="data"
+ :checkbox-config="checkboxConfig"
+ :height="height"
+ :max-height="maxHeight"
+ :toolbar="toolbar"
+ :reload-data="reloadData"
+ :footer-method="footerMethod"
+ :footer-cell-class-name="footerCellClassName"
+ :scroll-x="{ enabled: true }"
+ :scroll-y="{ enabled: true }"
+ row-height="auto"
+ :expand-config="expandConfig"
+ :tree-config="treeConfig"
+ :row-style="rowStyle"
+ :virtualYConfig="virtualYConfig"
+ @sort-change="sortChange"
+ @page-change="pagerChange"
+ @form-submit="findList"
+ @checkbox-change="checkChange"
+ @checkbox-all="checkChangeall"
+ @scroll-boundary="scrollBoundaryEvent"
+ >
+ <template v-slot:buttons="row">
+ <slot name="buttons" v-bind="row" />
+ </template>
+ <template #expandContent="{ row }">
+ <vxe-grid v-bind="subGridOptions" :data="row.subList"> </vxe-grid>
+ </template>
+ <template v-slot:status="row">
+ <slot name="status" v-bind="row" />
+ </template>
+ <template v-slot:mark="row">
+ <slot name="mark" v-bind="row" />
+ </template>
+ </vxe-grid>
+ </div>
+</template>
+
<script setup>
// 鑾峰彇 Vuex 瀛樺偍瀹炰緥
// const useStore = useStore();
const props = defineProps({
-/* table 鍙傛暟*/
-showOverflow: {
+ /* table 鍙傛暟*/
+ showOverflow: {
type: Boolean,
default: () => {
- return true
- }
-},
-columns: {
+ return true;
+ },
+ },
+ columns: {
type: Array,
default: () => {
- return []
- }
-},
-showfooter: {
+ return [];
+ },
+ },
+ showfooter: {
type: Boolean,
default: () => {
- return false
- }
-},
-toolbar: {
+ return false;
+ },
+ },
+ toolbar: {
type: Object,
default: () => {
- return {
- id: 'khjgz',
- zoom: true,
- resizable: {
- storage: true
- },
- custom: {
- storage: true
- },
- slots: {
- buttons: 'buttons'
- }
- }
- }
-},
-data: {
+ return {
+ id: "khjgz",
+ zoom: true,
+ resizable: {
+ storage: true,
+ },
+ custom: {
+ storage: true,
+ },
+ slots: {
+ buttons: "buttons",
+ },
+ };
+ },
+ },
+ data: {
type: Array,
default: () => {
- return []
- }
-},
-loading: {
+ return [];
+ },
+ },
+ loading: {
type: Boolean,
- default: false
-},
-page: {
+ default: false,
+ },
+ page: {
type: Object,
- default: function() {
- return null
- }
-},
-checkboxConfig: {
+ default: function () {
+ return null;
+ },
+ },
+ checkboxConfig: {
type: Object,
default: () => {
- return {}
- }
-},
-maxHeight: {
+ return {};
+ },
+ },
+ maxHeight: {
type: String,
default: () => {
- return ''
- }
-},
-height: {
+ return "";
+ },
+ },
+ height: {
type: String,
default: () => {
- return ''
- }
-},
-reloadData: {
+ return "";
+ },
+ },
+ reloadData: {
type: Function,
default: () => {
- return {}
- }
-},
-footerCellClassName: {
+ return {};
+ },
+ },
+ footerCellClassName: {
type: Function,
default: () => {
- return {}
- }
-},
-mxTableFootData: {
+ return {};
+ },
+ },
+ mxTableFootData: {
type: Array,
default: () => {
- return []
- }
-},
-expandConfig: {
+ return [];
+ },
+ },
+ expandConfig: {
type: Object,
default: () => {
- return {lazy: false}
- }
-},
-subGridOptions: {
- type:Object,
- default :()=>{
- return {}
- }
-},
-treeConfig: {
+ return { lazy: false };
+ },
+ },
+ subGridOptions: {
type: Object,
default: () => {
- return {}
- }
-},
-rowStyle: {
+ return {};
+ },
+ },
+ treeConfig: {
+ type: Object,
+ default: () => {
+ return {};
+ },
+ },
+ rowStyle: {
type: Function,
default: () => {
- return {}
- }
-},
-
-})
-
+ return {};
+ },
+ },
+ virtualYConfig:{
+ type: Object,
+ default: () => {
+ return {};
+ },
+ }
+});
const tableForm = ref([]);
@@ -182,55 +187,72 @@
const emit = defineEmits();
function pagerChange({ type, currentPage, pageSize }) {
- if (type == 'current') {
- emit("changePageNo", currentPage);
- } else if (type == 'size') {
- emit('changePageSize', pageSize)
- }
+ if (type == "current") {
+ emit("changePageNo", currentPage);
+ } else if (type == "size") {
+ emit("changePageSize", pageSize);
+ }
}
function findList() {}
function sortChange({ column, property, order }) {
- emit('sortTable', property, order)
+ emit("sortTable", property, order);
}
function checkChange(info) {
- const { records, checked, row, rowIndex } = info
- emit('on-checkbox', { records, rowIndex, checked })
+ const { records, checked, row, rowIndex } = info;
+ emit("on-checkbox", { records, rowIndex, checked });
}
function checkChangeall(info) {
- const { records, checked, row } = info
- emit('on-checkbox', { records, rowIndex: null, checked })
+ const { records, checked, row } = info;
+ emit("on-checkbox", { records, rowIndex: null, checked });
}
// 瀹氫箟 footerMethod 鍑芥暟
function footerMethod({ columns, data }) {
// 瑙﹀彂 footerMethod 浜嬩欢
- emit('footerMethod', { columns, data });
+ emit("footerMethod", { columns, data });
// 杩斿洖 Vuex 涓殑 hxlhTableFootData 鐘舵��
-// return useStore.state.hxlhTableFootData;
-};
-
+ // return useStore.state.hxlhTableFootData;
+}
+function scrollBoundaryEvent ({ direction }) {
+ switch (direction) {
+ case 'top':
+ console.log('瑙﹀彂椤堕儴闃堝�艰寖鍥�')
+ break
+ case 'bottom':
+ console.log('瑙﹀彂搴曢儴闃堝�艰寖鍥�')
+ // this.loadList(20)
+ emit('bottomAutoLoadMore')
+ break
+ case 'left':
+ console.log('瑙﹀彂宸︿晶闃堝�艰寖鍥�')
+ break
+ case 'right':
+ console.log('瑙﹀彂鍙充晶闃堝�艰寖鍥�')
+ break
+ }
+}
function handleSum(list, field) {
- var total = 0
- for (var index = 0; index < list.length; index++) {
- total += Number(list[index][field] || 0)
- }
- return total
+ var total = 0;
+ for (var index = 0; index < list.length; index++) {
+ total += Number(list[index][field] || 0);
+ }
+ return total;
}
const vxeTable = ref(null);
// 鍦ㄥ�煎彂鐢熸敼鍙樻椂鏇存柊琛ㄥ熬鍚堣
function updateFooter(params) {
- const xTable = vxeTable.value
- xTable.updateFooter()
+ const xTable = vxeTable.value;
+ xTable.updateFooter();
}
// 鍙栨秷澶嶉�夋閫夋嫨
function clearCheckboxRow() {
- const xTable = vxeTable.value
- xTable.clearCheckboxRow()
+ const xTable = vxeTable.value;
+ xTable.clearCheckboxRow();
}
// 瀹氫箟 tablePage 璁＄畻灞炴��
@@ -242,10 +264,19 @@
total: props.page.total,
currentPage: props.page.current,
pageSize: props.page.size,
- align: 'left',
+ align: "left",
pageSizes: [10, 20, 50, 100, 500],
- layouts: ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],
- perfect: true
+ layouts: [
+ "PrevJump",
+ "PrevPage",
+ "Number",
+ "NextPage",
+ "NextJump",
+ "Sizes",
+ "FullJump",
+ "Total",
+ ],
+ perfect: true,
};
});
@@ -273,17 +304,16 @@
</script>
<style lang="scss">
- .hxlh-table .vxe-toolbar .vxe-tools--operate {
- margin-top: -23px;
- }
+.hxlh-table .vxe-toolbar .vxe-tools--operate {
+ margin-top: -23px;
+}
- .hxlh-table .vxe-toolbar {
- min-height: 52px;
- height: auto;
- }
+.hxlh-table .vxe-toolbar {
+ min-height: 52px;
+ height: auto;
+}
- .vxe-table .vxe-footer--column.col-red {
- color: red;
- }
-
-</style>
\ No newline at end of file
+.vxe-table .vxe-footer--column.col-red {
+ color: red;
+}
+</style>
--
Gitblit v1.9.3