Layout

💡 Component: my-layout

Layout component. Global component, no additional dynamic import needed.

Use when the table needs to be fullscreen. The fullscreen element needs to add class="my-fill".

MyLayout Basic Usage

<my-layout>
  <el-card class="my-query-box mt8" shadow="never" :body-style="{ paddingBottom: '0' }">
    ...
  </el-card>
  <el-card class="my-fill mt8" shadow="never">
    ...
  </el-card>
</my-layout>

💡 Component: my-split-panes

Pane splitter component. Use when the interface needs a split layout.

Local import

import { defineAsyncComponent } from 'vue'

const MySplitPanes = defineAsyncComponent(() => import('/@/components/my-layout/split-panes.vue'))

MySplitPanes Basic Usage

Left-right layout

<MySplitPanes>
  <pane size="50" min-size="30" max-size="70">
  </pane>
  <pane>
  </pane>
</MySplitPanes>

MySplitPanes Props

Prop	Description	Type	Default	Accepted Values
horizontal	Horizontal layout, otherwise vertical	Boolean	false	-
push-other-panes	Other panes will be pushed accordingly	Boolean	true	-
dbl-click-splitter	Double-clicking the splitter will maximize or restore the adjacent pane	Boolean	true	-
rtl	Layout will be arranged from right to left	Boolean	false	-
first-splitter	The first splitter will be activated, allowing pane size adjustment from the start	Boolean	false	-

MySplitPanes Events

Event	Description	Return Parameter
ready	Triggered when MySplitPanes is ready
resize	Resizing	Array of all pane objects and their sizes
resized	Drag ended	Array of all pane objects and their sizes
pane-click	Pane clicked	Clicked pane object and its size
pane-maximize	Pane maximized	Maximized pane object and its size
pane-add	Pane added	Index of the added pane and the resized new pane array
pane-remove	Pane removed	Removed pane and all remaining pane objects with their sizes
splitter-click	Splitter clicked	Next pane object (with size) immediately after the clicked splitter

Pane Props

Prop	Description	Type	Default	Accepted Values
size	Size	[Number, String]	-	-
minSize	Minimum size	[Number, String]	0	-
maxSize	Maximum size	[Number, String]	100	-