Element Plus 2.10.0 重磅发布！新增Splitter组件

大家好，我是农村程序员，独立开发者，行业观察员，前端之虎陈随易。

这是我专门分享代码技术，编程资讯，行业热点的公众号，欢迎关注。

• 个人网站 1️⃣：chensuiyi.me
• 个人网站 2️⃣：me.yicode.tech
• 技术群，搞钱群，闲聊群，自驾群，想入群的在我个人网站联系我。

一键三连 (点赞、评论、转发)，可以给我提供曝光，带来一份早餐收入，谢谢大家~~

---

发布时间：2025-06-06 版本号：v2.10.0 贡献者：14 位 影响范围：⭐⭐⭐⭐⭐

💡 开发者必读：本次更新包含 1 个破坏性变更 (Menu Item)，请仔细阅读升级指南。

---

📢 写在前面

距离上一个版本发布已有两个月，Element Plus 团队带来了 v2.10.0 版本。这个版本不仅修复了社区呼声最高的 15+ 个问题，还带来了期待已久的 Splitter 分割面板组件。

本文适合人群：

• 正在使用 Element Plus 的开发者
• 考虑技术选型的架构师
• 关注前端组件库发展的技术爱好者

---

🎯 版本亮点速览

在深入细节之前，让我们先看看这个版本最值得关注的改进：

• 🆕 全新组件：Splitter 分割面板，让布局更灵活
• ⚡ 性能提升：Color Picker 使用专业库，计算速度提升 40%
• 🐛 修复 15+ 个 Bug：涵盖表单、对话框、级联选择器等核心组件
• 🔧 代码重构：类型安全增强，开发体验更好

四大新特性详解 (附实战案例)

🔔 Alert 组件增强：智能通知管理

使用场景：用户操作反馈、系统提示、定时通知

旧方案的痛点：

// 以前需要手动控制显示隐藏
const showAlert = ref(false);
setTimeout(() => {
    showAlert.value = true;
    setTimeout(() => {
        showAlert.value = false;
    }, 5000);
}, 2000);

新方案一行搞定：

<template>
    <el-alert :open-delay="2000" :auto-close="5000" title="订单提交成功！" type="success" description="您的订单将在2小时内发货" />
</template>

实战技巧：配合路由守卫实现页面切换提示

router.beforeEach((to, from, next) => {
    if (hasUnsavedChanges) {
        // 显示提醒，3秒后自动消失
        showAutoAlert('您有未保存的更改', 3000);
    }
    next();
});

真实场景案例 - 表单自动保存提示：

<template>
    <div class="form-container">
        <!-- 自动保存成功提示 -->
        <el-alert v-if="autoSaveSuccess" :open-delay="0" :auto-close="3000" type="success" :closable="false" title="自动保存成功" :description="`最后保存时间：${lastSaveTime}`" />

        <el-form @input="handleFormChange">
            <!-- 表单内容 -->
        </el-form>
    </div>
</template>

<script setup>
import { debounce } from 'lodash-es';

const autoSaveSuccess = ref(false);
const lastSaveTime = ref('');

// 防抖自动保存
const handleFormChange = debounce(async () => {
    await saveFormData();
    autoSaveSuccess.value = true;
    lastSaveTime.value = new Date().toLocaleTimeString();

    // 3秒后自动隐藏，无需手动控制
    setTimeout(() => {
        autoSaveSuccess.value = false;
    }, 3100);
}, 1000);
</script>

📜 Scrollbar 滚动到底事件：无限加载神器

使用场景：商品列表、动态 feed、聊天记录

极简实现无限滚动：

<template>
    <el-scrollbar height="400px" @end-reached="loadMore" v-loading="loading">
        <div v-for="item in list" :key="item.id" class="item">
            {{ item.name }}
        </div>
    </el-scrollbar>
</template>

<script setup>
const list = ref([]);
const loading = ref(false);
const page = ref(1);

const loadMore = async () => {
    if (loading.value) return;

    loading.value = true;
    const newData = await fetchData(page.value++);
    list.value.push(...newData);
    loading.value = false;
};
</script>

性能优化提示 ：结合 v-infinite-scroll 指令，可实现更平滑的加载体验。

进阶用法 - 双向加载 (聊天记录)：

<template>
    <el-scrollbar ref="scrollbarRef" height="500px" @end-reached="loadNewMessages" @top-reached="loadHistoryMessages">
        <div class="message-list">
            <!-- 历史消息加载提示 -->
            <div v-if="loadingHistory" class="loading-tip">
                <el-icon class="is-loading"><Loading /></el-icon>
                加载更早的消息...
            </div>

            <!-- 消息列表 -->
            <div v-for="msg in messages" :key="msg.id" :class="['message-item', msg.isMe ? 'is-me' : '']">
                <div class="message-content">{{ msg.content }}</div>
                <div class="message-time">{{ msg.time }}</div>
            </div>

            <!-- 新消息加载提示 -->
            <div v-if="hasNewMessage" class="new-message-tip" @click="scrollToBottom">有新消息 ↓</div>
        </div>
    </el-scrollbar>
</template>

<script setup>
const scrollbarRef = ref();
const messages = ref([]);
const loadingHistory = ref(false);
const hasNewMessage = ref(false);

// 加载历史消息
const loadHistoryMessages = async () => {
    if (loadingHistory.value) return;

    loadingHistory.value = true;
    const oldMessages = await fetchHistoryMessages();
    messages.value.unshift(...oldMessages);

    // 保持滚动位置
    nextTick(() => {
        scrollbarRef.value.setScrollTop(100);
    });

    loadingHistory.value = false;
};

// 滚动到底部
const scrollToBottom = () => {
    scrollbarRef.value.setScrollTop(scrollbarRef.value.wrapRef.scrollHeight);
    hasNewMessage.value = false;
};
</script>

📊 Table Column 扩展插槽：表格展示新高度

使用场景：订单详情、用户信息卡片、嵌套数据展示

实用示例 - 订单详情展开：

<template>
    <el-table :data="orders">
        <el-table-column type="expand">
            <template #expand="{ row }">
                <div class="order-details">
                    <h4>订单商品明细</h4>
                    <div v-for="item in row.items" :key="item.id" class="product-item">
                        <img :src="item.image" />
                        <span>{{ item.name }} x {{ item.quantity }}</span>
                        <span>¥{{ item.price }}</span>
                    </div>
                    <div class="order-summary">
                        <p>配送地址：{{ row.address }}</p>
                        <p>联系电话：{{ row.phone }}</p>
                        <p>订单备注：{{ row.remark || '无' }}</p>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="orderNo" label="订单号" />
        <el-table-column prop="totalAmount" label="金额" />
    </el-table>
</template>

高级示例 - 嵌套子表格：

<template>
    <el-table :data="departments" row-key="id">
        <el-table-column type="expand">
            <template #expand="{ row }">
                <!-- 部门员工子表格 -->
                <div class="sub-table-container">
                    <h5>{{ row.name }} - 员工列表</h5>
                    <el-table :data="row.employees" size="small">
                        <el-table-column prop="name" label="姓名" width="120" />
                        <el-table-column prop="position" label="职位" />
                        <el-table-column prop="email" label="邮箱" />
                        <el-table-column label="操作" width="120">
                            <template #default="{ row: employee }">
                                <el-button link @click="editEmployee(employee)">编辑</el-button>
                                <el-button link type="danger">移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="部门名称" />
        <el-table-column prop="manager" label="负责人" />
        <el-table-column prop="employeeCount" label="人数" />
    </el-table>
</template>

<style scoped>
.sub-table-container {
    padding: 12px 50px;
    background-color: var(--el-fill-color-lighter);
}
</style>

🎛️ Splitter 分割面板：专业级布局组件

使用场景：代码编辑器、文件管理器、数据对比工具

完整示例 - 代码编辑器布局：

<template>
    <div class="editor-container">
        <el-splitter :default-position="30" :min="20" :max="50">
            <template #left>
                <!-- 文件树 -->
                <div class="file-tree">
                    <el-tree :data="files" />
                </div>
            </template>

            <template #right>
                <!-- 嵌套分割：代码编辑区和预览区 -->
                <el-splitter direction="vertical" :default-position="60">
                    <template #top>
                        <monaco-editor v-model="code" />
                    </template>
                    <template #bottom>
                        <div class="preview" v-html="compiledCode" />
                    </template>
                </el-splitter>
            </template>
        </el-splitter>
    </div>
</template>

高级技巧：保存用户的面板尺寸偏好

// 保存到 localStorage
const saveSplitterPosition = (position) => {
    localStorage.setItem('editor-splitter-pos', position);
};

// 恢复设置
const defaultPosition = localStorage.getItem('editor-splitter-pos') || 30;

实战案例 - 响应式文件管理器：

<template>
    <div class="file-manager">
        <el-splitter v-model:position="splitPosition" :min="isMobile ? 0 : 200" :max="isMobile ? 100 : 400" @resize="handleResize">
            <template #left>
                <div class="folder-tree" :class="{ 'is-collapsed': splitPosition === 0 }">
                    <div class="tree-header">
                        <span>文件夹</span>
                        <el-button v-if="isMobile" link @click="toggleSidebar">
                            <el-icon><Close /></el-icon>
                        </el-button>
                    </div>
                    <el-tree :data="folders" @node-click="handleFolderClick" highlight-current :props="{ label: 'name', children: 'children' }" />
                </div>
            </template>

            <template #right>
                <div class="file-list">
                    <div class="list-header">
                        <el-button v-if="isMobile" link @click="toggleSidebar">
                            <el-icon><Expand /></el-icon>
                        </el-button>
                        <el-breadcrumb>
                            <el-breadcrumb-item v-for="item in breadcrumb" :key="item.id" :to="{ path: item.path }">
                                {{ item.name }}
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>

                    <div class="file-grid">
                        <div v-for="file in files" :key="file.id" class="file-item" @click="selectFile(file)" @dblclick="openFile(file)">
                            <el-icon :size="48"><Document /></el-icon>
                            <div class="file-name">{{ file.name }}</div>
                            <div class="file-size">{{ formatSize(file.size) }}</div>
                        </div>
                    </div>
                </div>
            </template>
        </el-splitter>
    </div>
</template>

<script setup>
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';

const breakpoints = useBreakpoints(breakpointsTailwind);
const isMobile = breakpoints.smaller('md');

const splitPosition = ref(isMobile.value ? 0 : 30);

// 切换侧边栏
const toggleSidebar = () => {
    splitPosition.value = splitPosition.value === 0 ? 100 : 0;
};

// 监听尺寸变化
const handleResize = (newPosition) => {
    // 保存用户偏好
    if (!isMobile.value) {
        localStorage.setItem('file-manager-split', newPosition);
    }
};

// 响应式处理
watch(isMobile, (value) => {
    if (value) {
        splitPosition.value = 0; // 移动端默认收起
    } else {
        // 恢复桌面端设置
        splitPosition.value = parseInt(localStorage.getItem('file-manager-split')) || 30;
    }
});
</script>

---

社区贡献亮点

🏆 本期贡献之星

1. @Gnalvin - Splitter 组件作者

   • 代码质量优秀
   • 文档完善
   • 响应社区反馈及时

2. @betavs - Bug 修复大师

   • 修复 5 个关键问题
   • 代码审查积极
   • 帮助其他贡献者

📈 贡献统计

本次版本的贡献分布：

pie title 贡献类型分布 "新功能" : 4 "Bug修复" : 15 "代码重构" : 5 "文档改进" : 3 "测试用例" : 2

---

🎯 总结与展望

Element Plus v2.10.0 不仅仅是一次常规更新，它体现了团队对细节的关注和对开发者体验的重视：

• 新组件填补空白：Splitter 组件满足了专业应用的布局需求
• Bug 修复提升稳定性：15+ 个问题的解决让日常开发更顺畅
• 性能优化带来更好体验：Color Picker 的重构是个很好的开始
• 社区活跃度持续提升：14 位贡献者的参与预示着更好的未来

🔮 下个版本预告

根据社区反馈和开发计划，v2.11.0 可能包含：

• 📱 移动端适配增强：更多组件支持触摸操作
• 🎨 主题定制工具：可视化主题编辑器
• 📊 图表组件集成：与 ECharts 深度整合
• 🚀 性能监控面板：开发环境性能分析工具