elementui控件

Element UI 控件概述

Element UI 是基于 Vue.js 的桌面端组件库，提供丰富的 UI 控件，适用于快速开发企业级中后台产品。以下是其核心控件分类及典型用法：

基础控件

• Button（按钮）：支持多种类型（primary、success、warning 等）、图标按钮和按钮组。

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

• Input（输入框）：包含验证、清除按钮、前缀后缀等功能。

  <el-input v-model="input" placeholder="请输入内容"></el-input>

表单控件

• Form（表单）：集成验证规则，支持动态表单和自定义校验。

  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="用户名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
  </el-form>

• Select（选择器）：支持搜索、多选、远程加载数据等。

  <el-select v-model="value" placeholder="请选择">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>

数据展示控件

• Table（表格）：支持排序、分页、自定义列模板和行选择。

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

• Pagination（分页）：与表格结合使用，提供页面大小切换。

  <el-pagination :total="100" :page-size="10" @current-change="handlePageChange"></el-pagination>

通知与反馈控件

• Message（消息提示）：轻量级全局提示，支持多种状态。

  this.$message.success('操作成功');

• Dialog（对话框）：模态框，支持自定义内容和异步关闭。

  <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
    <span>这是一段信息</span>
  </el-dialog>

导航控件

• Menu（菜单）：侧边栏导航，支持多级菜单和路由集成。

  <el-menu :default-active="activeIndex" mode="horizontal">
    <el-menu-item index="1">首页</el-menu-item>
    <el-submenu index="2">
      <template slot="title">产品</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
    </el-submenu>
  </el-menu>

其他实用控件

• Upload（上传）：文件上传，支持拖拽和多文件选择。

  <el-upload action="/upload" :on-success="handleSuccess">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>

• DatePicker（日期选择器）：支持日期范围选择和快捷选项。

  <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>

使用建议

• 按需引入控件以减少打包体积，通过 babel-plugin-component 配置。
• 结合官方文档调整样式和交互细节，文档地址：Element UI 官方文档。
• 注意 Vue 版本兼容性，Element UI 适用于 Vue 2.x，Vue 3.x 需使用 Element Plus。