elementi ui 面板分割

Element UI是一个基于Vue.js的开源UI框架，它提供了丰富的组件库，包括各种交互式元素。面板分割（Panel Splitter）是Element UI中的一个可定制组件，用于创建分隔式的布局，常用于展示内容区域之间的切换或划分。

在Element UI的`el-splitpane`组件中，你可以轻松地创建左右、上下或自适应宽度的面板分割。这个组件有两个主要属性：
1. `split`: 指定分割的方向，如`horizontal`（水平）或`vertical`（垂直）。
2. `size`: 分割后的每个面板的大小，可以是百分比或固定像素值。

例如，如果你想创建一个水平方向的面板分割，可以这样做：

<template>
  <div>
    <el-splitpane :split="true" :size="30%" @resize="handleResize">
      <el-pane>左侧面板</el-pane>
    </el-splitpane>
    <el-splitpane :split="true" :size="70%">
      <el-pane>右侧面板</el-pane>
    </el-splitpane>
  </div>
</template>

<script>
export default {
  data() {
    return {
      split: 'horizontal', // 默认水平分割
    };
  },
  methods: {
    handleResize() {
      console.log('分割线位置发生了变化');
    },
  },
};
</script>