Element UI Vue2

Element UI Vue2 desktop component library. Invoke when developing Vue 2.x pages, using Element components (el-button, el-input, el-form, el-table, etc.), or needing UI elements like forms, tables, dialogs, navigation for desktop web applications.

WuFengSheng@wufengsheng

Install

openclaw skills install @wufengsheng/element-ui-vue2

Element UI Vue2 组件库技能

Element UI，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，由饿了么前端团队开源维护。

触发条件

在以下场景中自动调用此技能：

开发 Vue 2.x 桌面端页面时
使用 el- 前缀的组件时（如 el-button, el-input, el-form, el-table 等）
需要表单、表格、弹窗、导航、通知等桌面端 UI 组件时
需要使用 Element UI 的布局系统（el-row, el-col, el-container 等）时
需要配置 Element UI 主题、国际化或自定义样式时
需要参考 Vue 2.x 组件库的 API 属性（Attributes）、事件（Events）、插槽（Slots）、方法（Methods）时

组件快速索引

基础组件

组件	说明	文档
layout	Layout 布局	layout
container	Container 布局容器	container
color	Color 色彩	color
typography	Typography 字体	typography
border	Border 边框	border
icon	Icon 图标	icon
button	Button 按钮	button
link	Link 文字链接	link

表单组件

组件	说明	文档
form	Form 表单	form
input	Input 输入框	input
input-number	InputNumber 计数器	input-number
select	Select 选择器	select
cascader	Cascader 级联选择器	cascader
checkbox	Checkbox 多选框	checkbox
radio	Radio 单选框	radio
switch	Switch 开关	switch
slider	Slider 滑块	slider
time-picker	TimePicker 时间选择器	time-picker
date-picker	DatePicker 日期选择器	date-picker
datetime-picker	DateTimePicker 日期时间选择器	datetime-picker
upload	Upload 上传	upload
rate	Rate 评分	rate
color-picker	ColorPicker 颜色选择器	color-picker
transfer	Transfer 穿梭框	transfer

数据展示

组件	说明	文档
table	Table 表格	table
tag	Tag 标签	tag
progress	Progress 进度条	progress
tree	Tree 树形控件	tree
pagination	Pagination 分页	pagination
badge	Badge 标记	badge
avatar	Avatar 头像	avatar
skeleton	Skeleton 骨架屏	skeleton
empty	Empty 空状态	empty
descriptions	Descriptions 描述列表	descriptions
result	Result 结果	result
statistic	Statistic 统计数值	statistic

通知组件

组件	说明	文档
alert	Alert 警告	alert
loading	Loading 加载	loading
message	Message 消息提示	message
message-box	MessageBox 弹框	message-box
notification	Notification 通知	notification

导航组件

组件	说明	文档
nav-menu	NavMenu 导航菜单	nav-menu
tabs	Tabs 标签页	tabs
breadcrumb	Breadcrumb 面包屑	breadcrumb
page-header	PageHeader 页头	page-header
dropdown	Dropdown 下拉菜单	dropdown
steps	Steps 步骤条	steps

其他组件

组件	说明	文档
dialog	Dialog 对话框	dialog
tooltip	Tooltip 文字提示	tooltip
popover	Popover 弹出框	popover
popconfirm	Popconfirm 气泡确认框	popconfirm
card	Card 卡片	card
carousel	Carousel 走马灯	carousel
collapse	Collapse 折叠面板	collapse
timeline	Timeline 时间线	timeline
divider	Divider 分割线	divider
calendar	Calendar 日历	calendar
image	Image 图片	image
backtop	Backtop 回到顶部	backtop
infinite-scroll	InfiniteScroll 无限滚动	infinite-scroll
drawer	Drawer 抽屉	drawer

指南文档

指南	说明	文档
design	设计原则	design
nav	导航指南	nav
installation	安装指南	installation
quickstart	快速上手	quickstart
i18n	国际化指南	i18n
custom-theme	自定义主题指南	custom-theme
transition	内置过渡动画指南	transition
changelog	更新日志	changelog

使用示例

按钮组件

vue

<template>
  <div>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-button type="primary" :loading="true">加载中</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$message.success('按钮点击成功')
    }
  }
}
</script>

表单组件

vue

<template>
  <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" size="medium">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" placeholder="请输入用户名" clearable></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="gender">
      <el-radio-group v-model="form.gender">
        <el-radio label="male">男</el-radio>
        <el-radio label="female">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="爱好" prop="hobbies">
      <el-checkbox-group v-model="form.hobbies">
        <el-checkbox label="reading" name="hobbies">阅读</el-checkbox>
        <el-checkbox label="sports" name="hobbies">运动</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
      <el-button @click="resetForm('formRef')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        gender: 'male',
        hobbies: []
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success('提交成功！')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

表格组件

vue

<template>
  <div>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="date" label="日期" width="180" sortable></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="100">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '张三', address: '北京市朝阳区' }
      ],
      currentPage: 1,
      pageSize: 10
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      this.$confirm('确认删除该条数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1)
        this.$message.success('删除成功')
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

完整文档列表

指南类（8 篇）

design - 设计原则
nav - 导航指南
installation - 安装指南
quickstart - 快速上手
i18n - 国际化指南
custom-theme - 自定义主题指南
transition - 内置过渡动画指南
changelog - 更新日志

基础组件（8 个）

layout - Layout 布局
container - Container 布局容器
color - Color 色彩
typography - Typography 字体
border - Border 边框
icon - Icon 图标
button - Button 按钮
link - Link 文字链接

表单组件（16 个）

form - Form 表单
input - Input 输入框
input-number - InputNumber 计数器
select - Select 选择器
cascader - Cascader 级联选择器
checkbox - Checkbox 多选框
radio - Radio 单选框
switch - Switch 开关
slider - Slider 滑块
time-picker - TimePicker 时间选择器
date-picker - DatePicker 日期选择器
datetime-picker - DateTimePicker 日期时间选择器
upload - Upload 上传
rate - Rate 评分
color-picker - ColorPicker 颜色选择器
transfer - Transfer 穿梭框

数据展示组件（12 个）

table - Table 表格
tag - Tag 标签
progress - Progress 进度条
tree - Tree 树形控件
pagination - Pagination 分页
badge - Badge 标记
avatar - Avatar 头像
skeleton - Skeleton 骨架屏
empty - Empty 空状态
descriptions - Descriptions 描述列表
result - Result 结果
statistic - Statistic 统计数值

通知组件（5 个）

alert - Alert 警告
loading - Loading 加载
message - Message 消息提示
message-box - MessageBox 弹框
notification - Notification 通知

导航组件（6 个）

nav-menu - NavMenu 导航菜单
tabs - Tabs 标签页
breadcrumb - Breadcrumb 面包屑
page-header - PageHeader 页头
dropdown - Dropdown 下拉菜单
steps - Steps 步骤条

其他组件（14 个）

dialog - Dialog 对话框
tooltip - Tooltip 文字提示
popover - Popover 弹出框
popconfirm - Popconfirm 气泡确认框
card - Card 卡片
carousel - Carousel 走马灯
collapse - Collapse 折叠面板
timeline - Timeline 时间线
divider - Divider 分割线
calendar - Calendar 日历
image - Image 图片
backtop - Backtop 回到顶部
infinite-scroll - InfiniteScroll 无限滚动
drawer - Drawer 抽屉

Element UI Vue2

Install

Element UI Vue2 组件库技能

触发条件

组件快速索引

基础组件

表单组件

数据展示

通知组件

导航组件

其他组件

指南文档

使用示例

按钮组件

表单组件

表格组件

完整文档列表

指南类（8 篇）

基础组件（8 个）

表单组件（16 个）

数据展示组件（12 个）

通知组件（5 个）

导航组件（6 个）

其他组件（14 个）

Related skills