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

pure-admin · Sep 24, 2024 · 281675b · 281675b
1 parent 0004f13
commit 281675b
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 13 deletions.
diff --git a/src/components/RePureTableBar/src/bar.tsx b/src/components/RePureTableBar/src/bar.tsx
@@ -54,7 +54,7 @@ const props = {
 export default defineComponent({
  name: "PureTableBar",
  props,
- emits: ["refresh"],
+ emits: ["refresh", "fullscreen"],
  setup(props, { emit, slots, attrs }) {
  const size = ref("default");
  const loading = ref(false);
@@ -117,6 +117,11 @@ export default defineComponent({
  toggleRowExpansionAll(props.tableRef.data, isExpandAll.value);
  }
 
+ function onFullscreen() {
+ isFullscreen.value = !isFullscreen.value;
+ emit("fullscreen", isFullscreen.value);
+ }
+
  function toggleRowExpansionAll(data, isExpansion) {
  data.forEach(item => {
  props.tableRef.toggleRowExpansion(item, isExpansion);
@@ -378,7 +383,7 @@ export default defineComponent({
  class={["w-[16px]", iconClass.value]}
  icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
  v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
- onClick={() => (isFullscreen.value = !isFullscreen.value)}
+ onClick={() => onFullscreen()}
  />
  </div>
  </div>

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

diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
@@ -26,6 +26,11 @@ const {
  handleDelete,
  handleSelectionChange
 } = useDept();
+
+function onFullscreen() {
+ // 重置表格高度
+ tableRef.value.setAdaptive();
+}
 </script>
 
 <template>
@@ -75,6 +80,7 @@ const {
  :columns="columns"
  :tableRef="tableRef?.getTableRef()"
  @refresh="onSearch"
+ @fullscreen="onFullscreen"
  >
  <template #buttons>
  <el-button

diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
@@ -27,6 +27,11 @@ const {
  handleDelete,
  handleSelectionChange
 } = useMenu();
+
+function onFullscreen() {
+ // 重置表格高度
+ tableRef.value.setAdaptive();
+}
 </script>
 
 <template>
@@ -66,6 +71,7 @@ const {
  :isExpandAll="false"
  :tableRef="tableRef?.getTableRef()"
  @refresh="onSearch"
+ @fullscreen="onFullscreen"
  >
  <template #buttons>
  <el-button

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