搜Elementui

ElementUI 简介

ElementUI 是一套基于 Vue.js 的桌面端组件库，由饿了么前端团队开发并开源。它提供了丰富的 UI 组件（如表格、表单、弹窗等），适合快速构建企业级中后台产品。

核心特性

• 组件丰富：包含按钮、表单、表格、弹窗、导航等 50+ 常用组件。
• 主题定制：支持通过 SCSS 变量或在线主题编辑器自定义样式。
• 国际化：内置多语言支持，可切换中英文等语言环境。
• 兼容性：支持 Vue 2.x，部分版本适配 Vue 3.x（对应 Element Plus）。

安装与使用

通过 npm 或 yarn 安装：

npm install element-ui -S
# 或
yarn add element-ui

在 Vue 项目中引入（以全局引入为例）：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

常用组件示例

1. 按钮组件

   <el-button type="primary">主要按钮</el-button>

2. 表格组件

   <el-table :data="tableData">
   <el-table-column prop="date" label="日期"></el-table-column>
   <el-table-column prop="name" label="姓名"></el-table-column>
   </el-table>

主题定制

修改 SCSS 变量文件 element-variables.scss：

$--color-primary: #ff4500; /* 修改主题色 */
@import "~element-ui/packages/theme-chalk/src/index";

注意事项

• Vue 3 支持：需使用 Element Plus，为 ElementUI 的 Vue 3 升级版。
• 按需引入：通过 babel-plugin-component 减少打包体积。

官方资源

• 官网：ElementUI
• GitHub：ElemeFE/element