fix: 修复在菜单、部门管理中,表格展开后启用或关闭全屏功能时,表格高度未自动适应的问题

This commit is contained in:
xiaoxian521 2024-09-24 08:42:46 +08:00
parent 0004f1318c
commit 281675bdaf
5 changed files with 29 additions and 13 deletions

View File

@ -54,7 +54,7 @@ const props = {
export default defineComponent({ export default defineComponent({
name: "PureTableBar", name: "PureTableBar",
props, props,
emits: ["refresh"], emits: ["refresh", "fullscreen"],
setup(props, { emit, slots, attrs }) { setup(props, { emit, slots, attrs }) {
const size = ref("default"); const size = ref("default");
const loading = ref(false); const loading = ref(false);
@ -117,6 +117,11 @@ export default defineComponent({
toggleRowExpansionAll(props.tableRef.data, isExpandAll.value); toggleRowExpansionAll(props.tableRef.data, isExpandAll.value);
} }
function onFullscreen() {
isFullscreen.value = !isFullscreen.value;
emit("fullscreen", isFullscreen.value);
}
function toggleRowExpansionAll(data, isExpansion) { function toggleRowExpansionAll(data, isExpansion) {
data.forEach(item => { data.forEach(item => {
props.tableRef.toggleRowExpansion(item, isExpansion); props.tableRef.toggleRowExpansion(item, isExpansion);
@ -378,7 +383,7 @@ export default defineComponent({
class={["w-[16px]", iconClass.value]} class={["w-[16px]", iconClass.value]}
icon={isFullscreen.value ? ExitFullscreen : Fullscreen} icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
v-tippy={isFullscreen.value ? "退出全屏" : "全屏"} v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
onClick={() => (isFullscreen.value = !isFullscreen.value)} onClick={() => onFullscreen()}
/> />
</div> </div>
</div> </div>

View File

@ -52,7 +52,7 @@ const props = {
export default defineComponent({ export default defineComponent({
name: "VxeTableBar", name: "VxeTableBar",
props, props,
emits: ["refresh"], emits: ["refresh", "fullscreen"],
setup(props, { emit, slots, attrs }) { setup(props, { emit, slots, attrs }) {
const size = ref("small"); const size = ref("small");
const loading = ref(false); const loading = ref(false);
@ -113,6 +113,11 @@ export default defineComponent({
props.vxeTableRef.refreshColumn(); props.vxeTableRef.refreshColumn();
} }
function onFullscreen() {
isFullscreen.value = !isFullscreen.value;
emit("fullscreen", isFullscreen.value);
}
function reloadColumn() { function reloadColumn() {
const curCheckedColumns = cloneDeep(dynamicColumns.value).filter(item => const curCheckedColumns = cloneDeep(dynamicColumns.value).filter(item =>
checkedColumns.value.includes(item.title) checkedColumns.value.includes(item.title)
@ -369,7 +374,7 @@ export default defineComponent({
class={["w-[16px]", iconClass.value]} class={["w-[16px]", iconClass.value]}
icon={isFullscreen.value ? ExitFullscreen : Fullscreen} icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
v-tippy={isFullscreen.value ? "退出全屏" : "全屏"} v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
onClick={() => (isFullscreen.value = !isFullscreen.value)} onClick={() => onFullscreen()}
/> />
</div> </div>
</div> </div>

View File

@ -26,6 +26,11 @@ const {
handleDelete, handleDelete,
handleSelectionChange handleSelectionChange
} = useDept(); } = useDept();
function onFullscreen() {
//
tableRef.value.setAdaptive();
}
</script> </script>
<template> <template>
@ -75,6 +80,7 @@ const {
:columns="columns" :columns="columns"
:tableRef="tableRef?.getTableRef()" :tableRef="tableRef?.getTableRef()"
@refresh="onSearch" @refresh="onSearch"
@fullscreen="onFullscreen"
> >
<template #buttons> <template #buttons>
<el-button <el-button

View File

@ -27,6 +27,11 @@ const {
handleDelete, handleDelete,
handleSelectionChange handleSelectionChange
} = useMenu(); } = useMenu();
function onFullscreen() {
//
tableRef.value.setAdaptive();
}
</script> </script>
<template> <template>
@ -66,6 +71,7 @@ const {
:isExpandAll="false" :isExpandAll="false"
:tableRef="tableRef?.getTableRef()" :tableRef="tableRef?.getTableRef()"
@refresh="onSearch" @refresh="onSearch"
@fullscreen="onFullscreen"
> >
<template #buttons> <template #buttons>
<el-button <el-button

View File

@ -1,6 +1,6 @@
import { tableData } from "../data"; import { tableData } from "../data";
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { clone, delay } from "@pureadmin/utils"; import { clone } from "@pureadmin/utils";
export function useColumns() { export function useColumns() {
const dataList = ref([]); const dataList = ref([]);
@ -38,14 +38,8 @@ export function useColumns() {
} }
onMounted(() => { onMounted(() => {
delay(600).then(() => { clone(tableData, true).forEach((item, index) => {
const newList = []; dataList.value.push({ id: index, ...item });
Array.from({ length: 6 }).forEach(() => {
newList.push(clone(tableData, true));
});
newList.flat(Infinity).forEach((item, index) => {
dataList.value.push({ id: index, ...item });
});
}); });
}); });