<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, useKey: true }"
|
:row-config="{ useKey: 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"
|
:edit-config="editConfig"
|
@sort-change="sortChange"
|
@page-change="pagerChange"
|
@form-submit="findList"
|
@checkbox-change="checkChange"
|
@checkbox-all="checkChangeall"
|
@scroll-boundary="scrollBoundaryEvent"
|
>
|
<template v-slot:rowIndex="row">
|
<slot name="rowIndex" v-bind="row" />
|
</template>
|
<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: {
|
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 [];
|
},
|
},
|
expandConfig: {
|
type: Object,
|
default: () => {
|
return { lazy: false };
|
},
|
},
|
subGridOptions: {
|
type: Object,
|
default: () => {
|
return {};
|
},
|
},
|
treeConfig: {
|
type: Object,
|
default: () => {
|
return null;
|
},
|
},
|
rowStyle: {
|
type: Function,
|
default: () => {
|
return {};
|
},
|
},
|
virtualYConfig:{
|
type: Object,
|
default: () => {
|
return {};
|
},
|
},
|
editConfig:{
|
type: Object,
|
default: () => {
|
return {};
|
},
|
}
|
});
|
|
const tableForm = ref([]);
|
|
// 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 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;
|
}
|
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;
|
}
|
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,
|
};
|
});
|
|
// 定义 footData 计算属性
|
const footData = computed(() => props.mxTableFootData);
|
|
/* const data = computed(() => {
|
if (!props.page) {
|
return;
|
}
|
const total = props.page.total;
|
const currentPage = tablePage.value.currentPage;
|
const pageSize = tablePage.value.pageSize;
|
let start = (currentPage - 1) * pageSize;
|
let end = start + pageSize;
|
if (end > total) {
|
end = total;
|
}
|
const tableData = [];
|
for (let i = start; i < end; i++) {
|
tableData.push(props.data[i]);
|
}
|
return tableData;
|
}); */
|
</script>
|
|
<style lang="scss">
|
.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>
|
