From cac2a51a3f9fcc6d55cdb292d70bd06525adf895 Mon Sep 17 00:00:00 2001
From: dy <dingyang@lnfxkj.tech>
Date: 星期二, 08 四月 2025 18:04:44 +0800
Subject: [PATCH] 封装vxe-grid组件
---
src/views/system/hxlhTable/index.vue | 107 +++++++++++++++++
src/components/HxlhTable/index.vue | 234 +++++++++++++++++++++++++++++++++++++++
src/main.js | 6 +
3 files changed, 347 insertions(+), 0 deletions(-)
diff --git a/src/components/HxlhTable/index.vue b/src/components/HxlhTable/index.vue
new file mode 100644
index 0000000..8807336
--- /dev/null
+++ b/src/components/HxlhTable/index.vue
@@ -0,0 +1,234 @@
+<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
+ :loading="loading"
+ :pager-config="tablePage"
+ :form-config="tableForm"
+ :columns="columns"
+ :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}"
+ @sort-change="sortChange"
+ @page-change="pagerChange"
+ @form-submit="findList"
+ @checkbox-change="checkChange"
+ @checkbox-all="checkChangeall"
+ >
+ <template v-slot:buttons>
+ <slot />
+ </template>
+ </vxe-grid>
+ </div>
+ </template>
+
+<script setup>
+
+// 鑾峰彇 Vuex 瀛樺偍瀹炰緥
+// const useStore = useStore();
+
+const props = defineProps({
+/* table 鍙傛暟*/
+showOverflow: {
+ type: Boolean,
+ default: () => {
+ return true
+ }
+},
+columns: {
+ type: Array,
+ default: () => {
+ return []
+ }
+},
+showfooter: {
+ type: Boolean,
+ default: () => {
+ return false
+ }
+},
+toolbar: {
+ type: Object,
+ default: () => {
+ return {
+ id: 'khjgz',
+ zoom: true,
+ resizable: {
+ storage: true
+ },
+ custom: {
+ storage: true
+ },
+ slots: {
+ buttons: 'buttons'
+ }
+ }
+ }
+},
+data: {
+ type: Array,
+ default: () => {
+ return []
+ }
+},
+loading: {
+ type: Boolean,
+ default: false
+},
+page: {
+ type: Object,
+ default: function() {
+ return null
+ }
+},
+checkboxConfig: {
+ type: Object,
+ default: () => {
+ return {}
+ }
+},
+maxHeight: {
+ type: String,
+ default: () => {
+ return ''
+ }
+},
+height: {
+ type: String,
+ default: () => {
+ return ''
+ }
+},
+reloadData: {
+ type: Function,
+ default: () => {
+ return {}
+ }
+},
+footerCellClassName: {
+ type: Function,
+ default: () => {
+ return {}
+ }
+},
+mxTableFootData: {
+ type: Array,
+ default: () => {
+ return []
+ }
+}
+})
+
+const tableForm = ref([]);
+
+const height = ref(document.documentElement.clientHeight - 94.5 + "px;")
+// const url = computed(() => props.src)
+const emit = defineEmits();
+
+function pagerChange({ type, currentPage, 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)
+}
+
+function checkChange(info) {
+ 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 })
+}
+
+// 瀹氫箟 footerMethod 鍑芥暟
+function footerMethod({ columns, data }) {
+ // 瑙﹀彂 footerMethod 浜嬩欢
+ emit('footerMethod', { columns, data });
+ // 杩斿洖 Vuex 涓殑 hxlhTableFootData 鐘舵��
+// return useStore.state.hxlhTableFootData;
+};
+
+function handleSum(list, field) {
+ 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()
+}
+
+// 鍙栨秷澶嶉�夋閫夋嫨
+function clearCheckboxRow() {
+ const xTable = vxeTable.value
+ xTable.clearCheckboxRow()
+}
+
+// 瀹氫箟 tablePage 璁＄畻灞炴��
+const tablePage = computed(() => {
+ if (!props.page) {
+ return;
+ }
+ console.log(props.page);
+ return {
+ total: props.page.total,
+ currentPage: props.page.current,
+ pageSize: props.page.size,
+ align: 'left',
+ pageSizes: [10, 20, 50, 100, 500],
+ layouts: ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],
+ perfect: true
+ };
+});
+
+console.log(tablePage);
+
+// 瀹氫箟 footData 璁＄畻灞炴��
+const footData = computed(() => props.mxTableFootData);
+
+</script>
+
+<style lang="less">
+ .hxlh-table .vxe-toolbar .vxe-tools--operate {
+ margin-top: -23px;
+ }
+
+ .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
diff --git a/src/main.js b/src/main.js
index 0994583..1b171e6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -42,6 +42,11 @@
import ImagePreview from "@/components/ImagePreview"
// 瀛楀吀鏍囩缁勪欢
import DictTag from '@/components/DictTag'
+// vxe-table
+import 'xe-utils';
+import VXETable from 'vxe-table'
+import 'vxe-table/lib/index.css'
+
const app = createApp(App)
@@ -78,5 +83,6 @@
// 鏀寔 large銆乨efault銆乻mall
size: Cookies.get('size') || 'default'
})
+app.use(VXETable)
app.mount('#app')
diff --git a/src/views/system/hxlhTable/index.vue b/src/views/system/hxlhTable/index.vue
new file mode 100644
index 0000000..787a886
--- /dev/null
+++ b/src/views/system/hxlhTable/index.vue
@@ -0,0 +1,107 @@
+<template>
+ <div id="view">
+ <el-row>
+ <el-col :span="24">
+ <div slot="header" class="clearfix">
+ <span><b>琛ㄦ牸灞曠ず</b></span>
+ </div>
+ <div style="width: 100%;display: flex;flex-direction: column;align-items: center;">
+
+ <!--鏌ヨ鏉′欢-->
+ <!-- <el-form ref="queryForm" style="width: 100%" inline>
+ <el-form-item label="鎺ュ彛鍚�" style="float: left" class="form_btn ">
+ <el-input v-model="selectItem.name" autocomplete="off"></el-input>
+ </el-form-item>
+ <el-form-item style="float: right" class="form_btn ">
+ <el-button icon="el-icon-search" @click="alert('鏆傛椂鏃犳硶鎼滅储')">鎼滅储</el-button>
+ </el-form-item>
+ </el-form> -->
+
+ <HxlhTable
+ style="width: 100%"
+ :columns="columns"
+ :data="tableData"
+ :loading="loading"
+ :page="page"
+ >
+ </HxlhTable>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+</template>
+
+<script setup>
+
+import { ref, reactive, onMounted } from 'vue';
+import HxlhTable from '@/components/HxlhTable'
+
+// 鎼滅储浣跨敤缁勪欢
+const selectItem = reactive({
+ name: ''
+});
+
+// 琛ㄦ牸 - 椤圭洰鎵�鏈夋暟鎹�
+const tableData = ref([
+ { code: '111', name: '寮犱笁', sex: '鐢�' },
+ { code: '222', name: '鏉庡洓', sex: '鐢�' },
+ { code: '333', name: '鐜嬩簲', sex: '鐢�' },
+ { code: '444', name: '璧靛叚', sex: '濂�' }
+]);
+
+for (let i = 0; i < 1000; i++) {
+ tableData.value.push({
+ code: `new${i + 1}`,
+ name: `鏂颁汉${i + 1}`,
+ sex: '鏈煡'
+ });
+ }
+
+// 琛ㄦ牸閰嶇疆
+const columns = ref([
+ { type: 'seq', title: '搴忓彿', width: 60 },
+ {
+ title: '缂栧彿',
+ field: 'code'
+ },
+ {
+ title: '鍚嶇О',
+ field: 'name'
+ },
+ {
+ title: '鎬у埆',
+ field: 'sex'
+ }
+]);
+
+// 琛ㄦ牸缂撳啿
+const loading = ref(false);
+
+// 鍒嗛〉灞炴��
+const page = reactive({
+ total: 1004,
+ current: 1,
+ size: 10
+});
+
+// 鐢熷懡鍛ㄦ湡閽╁瓙锛屾浛浠� mounted
+onMounted(() => {
+ // 杩欓噷鍙互鏀剧疆鍘熸潵 mounted 閽╁瓙涓殑浠ｇ爜
+});
+
+</script>
+
+<style scoped="scoped">
+#view {
+ width: 100%;
+ height: 100%;
+ padding: 0px;
+ margin: 0px;
+}
+
+.box-card {
+ width: 480px;
+}
+</style>
+
+
\ No newline at end of file
--
Gitblit v1.9.3