分隔器 测试版
将一块内容区域拆分为多个可调整大小的子区域。
默认使用纵向布局，更适合把页面拆成自上而下的多个内容分区。
基础用法
默认纵向分隔，适合详情页或多段编辑页。
订单信息
支付确认
vue
<template>
<div class="splitter-demo">
<el-splitter>
<el-splitter-panel size="32%">
<div class="demo-panel panel-primary">订单信息</div>
</el-splitter-panel>
<el-splitter-panel :min="160">
<div class="demo-panel panel-secondary">支付确认</div>
</el-splitter-panel>
</el-splitter>
</div>
</template>
<style scoped>
.splitter-demo {
height: min(70vh, 28rem);
overflow: hidden;
border-radius: 1rem;
border: 1px solid var(--el-border-color-lighter);
background: var(--el-bg-color);
}
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 1rem;
font-weight: 600;
}
.panel-primary {
background: var(--el-fill-color-light);
}
.panel-secondary {
background: var(--el-color-primary-light-9);
}
</style>隐藏来源
横向对比布局
只有在需要左右对比内容时，才显式使用 layout="horizontal"。
商品图
商品详情
vue
<template>
<div class="splitter-demo">
<el-splitter layout="horizontal">
<el-splitter-panel>
<div class="demo-panel panel-primary">商品图</div>
</el-splitter-panel>
<el-splitter-panel>
<div class="demo-panel panel-secondary">商品详情</div>
</el-splitter-panel>
</el-splitter>
</div>
</template>
<style scoped>
.splitter-demo {
height: min(70vh, 20rem);
overflow: hidden;
border-radius: 1rem;
border: 1px solid var(--el-border-color-lighter);
background: var(--el-bg-color);
}
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 1rem;
font-weight: 600;
}
.panel-primary {
background: var(--el-fill-color-light);
}
.panel-secondary {
background: var(--el-color-primary-light-9);
}
</style>隐藏来源
可折叠
通过 collapsible 快速收起某一段内容。
允许折叠：
收货信息
配送方式
订单备注
vue
<template>
<el-space alignment="start">
<div class="splitter-control">
允许折叠：<el-switch v-model="isCollapsible" />
</div>
<div class="splitter-demo">
<el-splitter>
<el-splitter-panel :collapsible="isCollapsible" min="50">
<div class="demo-panel panel-primary">收货信息</div>
</el-splitter-panel>
<el-splitter-panel :collapsible="isCollapsible">
<div class="demo-panel panel-secondary">配送方式</div>
</el-splitter-panel>
<el-splitter-panel>
<div class="demo-panel panel-neutral">订单备注</div>
</el-splitter-panel>
</el-splitter>
</div>
</el-space>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isCollapsible = ref(true)
</script>
<style scoped>
.splitter-control {
margin-bottom: 0.25rem;
}
.splitter-demo {
height: min(70vh, 30rem);
width: 100%;
overflow: hidden;
border-radius: 1rem;
border: 1px solid var(--el-border-color-lighter);
background: var(--el-bg-color);
}
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 1rem;
font-weight: 600;
}
.panel-primary {
background: var(--el-fill-color-light);
}
.panel-secondary {
background: var(--el-color-primary-light-9);
}
.panel-neutral {
background: var(--el-fill-color);
}
</style>隐藏来源
禁用拖拽
某个面板不允许调整大小时，可以关闭 resizable。
允许拖拽：
订单概览
当前锁定拖拽
确认提交
vue
<template>
<el-space alignment="start">
<div class="splitter-control">
允许拖拽：<el-switch v-model="resizable" />
</div>
<div class="splitter-demo">
<el-splitter>
<el-splitter-panel>
<div class="demo-panel panel-primary">订单概览</div>
</el-splitter-panel>
<el-splitter-panel :resizable="resizable">
<div class="demo-panel panel-secondary">
{{ resizable ? '当前可拖拽' : '当前锁定拖拽' }}
</div>
</el-splitter-panel>
<el-splitter-panel>
<div class="demo-panel panel-neutral">确认提交</div>
</el-splitter-panel>
</el-splitter>
</div>
</el-space>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const resizable = ref(false)
</script>
<style scoped>
.splitter-control {
margin-bottom: 0.25rem;
}
.splitter-demo {
height: min(70vh, 28rem);
width: 100%;
overflow: hidden;
border-radius: 1rem;
border: 1px solid var(--el-border-color-lighter);
background: var(--el-bg-color);
}
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 1rem;
font-weight: 600;
}
.panel-primary {
background: var(--el-fill-color-light);
}
.panel-secondary {
background: var(--el-color-primary-light-9);
}
.panel-neutral {
background: var(--el-fill-color);
}
</style>隐藏来源
面板尺寸
使用 v-model:size 获取或控制某个面板的尺寸。
订单摘要
100px 内容区
附加说明
vue
<template>
<div class="splitter-demo">
<el-splitter
@resize-start="handleResizeStart"
@resize-end="handleResizeEnd"
@resize="handleResize"
>
<el-splitter-panel>
<div class="demo-panel panel-primary">订单摘要</div>
</el-splitter-panel>
<el-splitter-panel v-model:size="size" :max="200" :min="50">
<div class="demo-panel panel-secondary">{{ size }}px 内容区</div>
</el-splitter-panel>
<el-splitter-panel>
<div class="demo-panel panel-neutral">附加说明</div>
</el-splitter-panel>
</el-splitter>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const size = ref(100)
const handleResizeStart = (index: number, sizes: number[]) => {
console.log('resizeStart', index, sizes)
}
const handleResize = (index: number, sizes: number[]) => {
console.log('resize', index, sizes)
}
const handleResizeEnd = (index: number, sizes: number[]) => {
console.log('resizeEnd', index, sizes)
}
</script>
<style scoped>
.splitter-demo {
height: min(70vh, 28rem);
overflow: hidden;
border-radius: 1rem;
border: 1px solid var(--el-border-color-lighter);
background: var(--el-bg-color);
}
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 1rem;
font-weight: 600;
}
.panel-primary {
background: var(--el-fill-color-light);
}
.panel-secondary {
background: var(--el-color-primary-light-9);
}
.panel-neutral {
background: var(--el-fill-color);
}
</style>隐藏来源
延迟更新
开启 lazy 后，拖拽过程中只显示结果预期，拖拽结束后再统一更新布局。
订单信息
配送时段
发票备注
vue
<template>
<div class="splitter-demo">
<el-splitter lazy>
<el-splitter-panel collapsible min="50">
<div class="demo-panel panel-primary">订单信息</div>
</el-splitter-panel>
<el-splitter-panel collapsible>
<div class="demo-panel panel-secondary">配送时段</div>
</el-splitter-panel>
<el-splitter-panel collapsible>
<div class="demo-panel panel-neutral">发票备注</div>
</el-splitter-panel>
</el-splitter>
</div>
</template>
<style scoped>
.splitter-demo {
height: min(70vh, 28rem);
overflow: hidden;
border-radius: 1rem;
border: 1px solid var(--el-border-color-lighter);
background: var(--el-bg-color);
}
.demo-panel {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 1rem;
font-weight: 600;
}
.panel-primary {
background: var(--el-fill-color-light);
}
.panel-secondary {
background: var(--el-color-primary-light-9);
}
.panel-neutral {
background: var(--el-fill-color);
}
</style>隐藏来源
Splitter API
Splitter 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| layout | 分隔方向 | enum | vertical |
| lazy | 是否延迟更新 | boolean | false |
Splitter 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
| resizeStart | 开始调整面板大小时触发，index 为拖拽条索引 | Function |
| resize | 调整面板大小过程中触发 | Function |
| resizeEnd | 调整结束后触发 | Function |
| collapse | 折叠或展开某一侧时触发 | Function |
SplitterPanel API
SplitterPanel 属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| size / v-model:size | 面板尺寸，支持像素或百分比 | string / number | — |
| min | 面板最小尺寸 | string / number | — |
| max | 面板最大尺寸 | string / number | — |
| resizable | 是否允许拖拽调整大小 | boolean | true |
| collapsible | 是否允许折叠 | boolean | false |
SplitterPanel 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
| update:size | 面板尺寸更新时触发 | Function |
SplitterPanel 插槽
| 插槽名 | 说明 |
|---|---|
| default | 面板默认内容 |
| start-collapsible | 起始侧折叠按钮内容 |
| end-collapsible | 结束侧折叠按钮内容 |
SplitterPanel 暴露
| 名称 | 说明 | 类型 |
|---|---|---|
| splitterPanelRef | SplitterPanel 根元素引用 | object |