<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"
|
: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 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;
|
}
|
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);
|
|
</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>
|
