mirror of
				https://github.com/pure-admin/vue-pure-admin.git
				synced 2025-11-03 13:44:47 +08:00 
			
		
		
		
	fix: 修复在菜单、部门管理中,表格展开后启用或关闭全屏功能时,表格高度未自动适应的问题
This commit is contained in:
		
							parent
							
								
									0004f1318c
								
							
						
					
					
						commit
						281675bdaf
					
				@ -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>
 | 
				
			||||||
 | 
				
			|||||||
@ -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>
 | 
				
			||||||
 | 
				
			|||||||
@ -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
 | 
				
			||||||
 | 
				
			|||||||
@ -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
 | 
				
			||||||
 | 
				
			|||||||
@ -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 });
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    });
 | 
					    });
 | 
				
			||||||
  });
 | 
					  });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user