Element-UI 组件库的核心组件及其用法

m0_740043732025-12-07 9:24

Element-UI 入门常用组件

Element-UI 是 Vue2 生态中最常用的桌面端组件库，以下是入门高频使用的组件，包含核心作用和简单示例（直接复制可运行，需先引入 Element-UI）。

复制代码 
<template>
  <div>
        
  </div>
</template>

前置准备（入门必配）

先确保项目已引入 Element-UI：

javascript 复制代码 
// main.js 全局引入（入门推荐）
// 引入Vue核心库
import Vue from 'vue';
// 引入Element-UI组件库
import ElementUI from 'element-ui';
// 引入Element-UI的默认样式文件（必须引入，否则组件无样式）
import 'element-ui/lib/theme-chalk/index.css';
// 全局注册Element-UI，所有Vue组件可直接使用Element-UI组件
Vue.use(ElementUI);

1. 布局（Layout）+ 容器（Container）

核心作用

  • Layout（栅格布局）：快速实现页面分栏、响应式适配；
  • Container（布局容器）：快速搭建页面整体布局（头部、侧边、主内容、底部）。

基础示例

javascript 复制代码 
<template>
  <div>
    <!-- Container 页面整体布局：包含header（头部）、aside（侧边）、main（主内容）、footer（底部） -->
    <el-container style="height: 500px; border: 1px solid #eee">
      <!-- 页面头部：通常放导航、logo等 -->
      <el-header style="text-align: center; font-size: 12px">
        <span>页面头部</span>
      </el-header>
      <el-container>
        <!-- 侧边栏：宽度固定200px，通常放菜单 -->
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          侧边栏
        </el-aside>
        <!-- 主内容区域：核心业务内容展示 -->
        <el-main>
          <!-- Layout 栅格分栏（24列布局）：el-row是行，el-col是列，:gutter是列间距 -->
          <el-row :gutter="20">
            <!-- :span="8" 表示占8列（24列布局，3列刚好占满） -->
            <el-col :span="8"><div class="grid-content bg-purple">列1（占8列）</div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light">列2（占8列）</div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">列3（占8列）</div></el-col>
          </el-row>
        </el-main>
      </el-container>
      <!-- 页面底部：通常放版权、联系方式等 -->
      <el-footer style="text-align: center; font-size: 12px">
        页面底部
      </el-footer>
    </el-container>
  </div>
</template>



<!-- 自定义样式：美化布局组件 -->
<style>
.el-header, .el-footer { background-color: #b3c0d1; color: #333; line-height: 60px; }
.el-aside { color: #333; }
.grid-content { border-radius: 4px; min-height: 36px; line-height: 36px; text-align: center; }
.bg-purple { background: #d3dce6; }
.bg-purple-light { background: #e5e9f2; }
</style>
<script setup>
</script>

2. 单选框（Radio）

核心作用

实现单一选项的选择（互斥选择），如 "性别选择""状态选择"。

基础示例 html

javascript 复制代码 
<template>
  <div>
    <!-- el-radio-group：单选框组，v-model绑定选中值（所有子项共用一个值） -->
    <el-radio-group v-model="radioValue">
      <!-- el-radio：单个单选框，label是选中时的取值 -->
      <el-radio label="1">选项1</el-radio>
      <el-radio label="2">选项2</el-radio>
      <!-- disabled：禁用该选项，无法选中 -->
      <el-radio label="3" disabled>禁用选项</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: 'RadioDemo',
  // 组件数据定义
  data() {
    return {
      radioValue: '1' // 默认选中值，与el-radio的label匹配
    }
  }
}
</script>

3. 复选框（Checkbox）

核心作用

实现多选项的选择（可多选），如 "兴趣爱好""权限勾选"。

基础示例 html

javascript 复制代码 
<el-checkbox-group v-model="checkList">
  <el-checkbox label="选项1"></el-checkbox>
  <el-checkbox label="选项2"></el-checkbox>
  <el-checkbox label="选项3" disabled></el-checkbox>
</el-checkbox-group>

<script>
export default {
  data() {
    return {
      checkList: ['选项1'] // 默认选中的选项
    }
  }
}
</script>

4. 输入框（Input）

核心作用

接收用户文本输入，支持普通文本、密码、多行文本、带图标等样式。
<!-- 普通输入框 -->

<el-input

v-model="inputValue" <!-- 双向绑定输入框内容 -->

placeholder="请输入内容" <!-- 占位提示文字 -->

clearable <!-- 显示清空按钮，点击可清空输入框 -->

></el-input>

<!-- 密码框 -->

<el-input

v-model="pwdValue" <!-- 双向绑定密码值 -->

type="password" <!-- 类型为密码，输入内容隐藏 -->

placeholder="请输入密码"

show-password <!-- 显示密码可见/隐藏切换按钮 -->

></el-input>

基础示例 html

javascript 复制代码 
<!-- 普通输入框 -->
<el-input 
  v-model="inputValue" 
  placeholder="请输入内容" 
  clearable  <!-- 清空按钮 -->
></el-input>

<!-- 密码框 -->
<el-input 
  v-model="pwdValue" 
  type="password" 
  placeholder="请输入密码"
  show-password  <!-- 显示/隐藏密码 -->
></el-input>

<script>
export default {
  name: 'InputDemo',
  data() {
    return {
      inputValue: '', // 普通输入框绑定值
      pwdValue: ''    // 密码框绑定值
    }
  }
}
</script>

5. 下拉选择器（Select）

核心作用

从预设选项列表中选择，支持单选 / 多选、搜索、禁用等。

基础示例 html

javascript 复制代码 
<template>
  <div>
    <!-- el-select：下拉选择器，v-model绑定选中值 -->
    <el-select v-model="selectValue" placeholder="请选择">
      <!-- el-option：下拉选项，label是显示文本，value是选中时的取值 -->
      <el-option label="选项1" value="1"></el-option>
      <el-option label="选项2" value="2"></el-option>
      <!-- disabled：禁用该选项，无法选中 -->
      <el-option label="选项3" value="3" disabled></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'SelectDemo',
  data() {
    return {
      selectValue: '' // 下拉选择器绑定值
    }
  }
}
</script>

6. 日期选择器（DatePicker）

核心作用

快速选择日期 / 时间，支持日、周、月、年、范围选择等。

基础示例 html

javascript 复制代码 
<template>
  <div style="display: flex; gap: 20px; align-items: center; flex-direction: column;">
    <!-- 单个日期选择器： -->
    <!-- v-model：绑定选中的单个日期 -->
    <!-- type： 选择类型：date（日期）、datetime（日期时间）等 -->
    <!-- placeholder：日期选择器占位提示文字 -->
    <!-- format：日期显示格式，格式为年-月-日 -->
    <el-date-picker
      v-model="dateValue"
      type="date"
      placeholder="请选择日期"
      format="yyyy-MM-dd"
    ></el-date-picker>

    <!-- 日期范围选择器： -->
    <!-- v-model：绑定日期范围，数组形式[开始日期, 结束日期] -->
    <!-- type：选择类型为daterange（日期范围） -->
    <!-- range-separator：开始/结束日期之间的分隔符 -->
    <!-- start-placeholder：开始日期的占位提示文字 -->
    <!-- end-placeholder：结束日期的占位提示文字 -->
    <el-date-picker
      v-model="dateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'DatePickerDemo',
  data() {
    return {
      // 单个日期绑定值
      dateValue: '',
      // 日期范围绑定值（数组）
      dateRange: []
    }
  }
}
</script>

7. 上传（Upload）

核心作用

实现文件上传，支持单文件 / 多文件、拖拽上传、格式限制、大小限制等。

基础示例 html

javascript 复制代码 
<template>
  <div>
    <!-- 文件上传组件： -->
    <!-- action：必选属性，文件上传的后端接口地址 -->
    <!-- limit：限制上传文件的数量，值为1表示只能上传1个文件 -->
    <!-- accept：限制文件上传格式，仅允许jpg/png图片 -->
    <!-- file-size：限制文件大小，单位KB，2*1024表示2MB -->
    <!-- list-type：上传列表的展示样式，picture-card为图片卡片样式 -->
    <!-- on-success：文件上传成功后的回调函数 -->
    <!-- on-error：文件上传失败后的回调函数 -->
    <el-upload
      action="/api/upload"
      :limit="1"
      :accept="['image/jpeg', 'image/png']"
      :file-size="2 * 1024"
      list-type="picture-card"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <!-- 上传按钮自定义内容：加号图标 -->
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: 'UploadDemo',
  // 方法定义：处理上传回调
  methods: {
    // 上传成功回调：res为后端返回数据，file为上传的文件对象
    handleSuccess(res, file) {
      console.log('上传成功：', res, file);
    },
    // 上传失败回调：err为错误信息，file为上传的文件对象
    handleError(err, file) {
      console.error('上传失败：', err, file);
    }
  }
}
</script>

8. 表单（Form）

核心作用

整合各类表单组件，实现数据收集、校验、提交，是表单场景的核心容器。

基础示例 html

javascript 复制代码 
<template>
  <div>
    <!-- 表单容器： -->
    <!-- model：必选属性，绑定表单数据对象 -->
    <!-- rules：表单校验规则 -->
    <!-- ref：表单引用标识，用于手动触发校验/重置 -->
    <!-- label-width：表单标签的宽度 -->
    <el-form
        :model="formData"
        :rules="formRules"
        ref="formRef"
        label-width="80px"
    >
      <!-- 表单项容器： -->
      <!-- label：表单项的标签文本 -->
      <!-- prop：与校验规则中的key对应，用于触发该字段的校验 -->
      <el-form-item label="姓名" prop="name">
        <!-- 姓名输入框：v-model绑定表单数据中的name字段 -->
        <el-input v-model="formData.name"></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <!-- 性别单选框组：v-model绑定表单数据中的gender字段 -->
        <el-radio-group v-model="formData.gender">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="爱好" prop="hobby">
        <!-- 爱好复选框组：v-model绑定表单数据中的hobby字段 -->
        <el-checkbox-group v-model="formData.hobby">
          <el-checkbox label="阅读"></el-checkbox>
          <el-checkbox label="运动"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <!-- 表单操作按钮区域 -->
      <el-form-item>
        <!-- 提交按钮：点击触发submitForm方法 -->
        <el-button type="primary" @click="submitForm">提交</el-button>
        <!-- 重置按钮：点击触发resetForm方法 -->
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'FormDemo',
  data() {
    return {
      // 表单数据对象：与表单项v-model绑定
      formData: {
        name: '',     // 姓名
        gender: '',   // 性别
        hobby: []     // 爱好（数组，存储多选值）
      },
      // 表单校验规则：key与表单项的prop对应
      formRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' } // 必填，失焦触发校验
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' } // 必填，值变化触发校验
        ]
      }
    }
  },
  methods: {
    // 表单提交方法
    submitForm() {
      // 手动触发表单校验：valid为布尔值，true表示校验通过
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          console.log('表单校验通过，提交数据：', this.formData);
          // 此处可调用后端接口提交表单数据
        } else {
          console.log('表单校验失败');
          return false;
        }
      });
    },
    // 表单重置方法
    resetForm() {
      // 重置表单：清空输入值，重置校验状态
      this.$refs.formRef.resetFields();
    }
  }
}
</script>

9. 表格（Table）

核心作用

展示结构化数据，支持排序、筛选、分页、自定义列、行操作等。

基础示例 html

javascript 复制代码 
<template>
  <div>
    <!-- 表格容器： -->
    <!-- data：绑定表格数据源（数组） -->
    <!-- border：显示表格边框 -->
    <!-- stripe：显示斑马纹（隔行变色） -->
    <!-- style：设置表格宽度为100% -->
    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
    >
      <!-- 表格列： -->
      <!-- prop：绑定数据源的字段名，用于展示该字段值 -->
      <!-- label：列标题文本 -->
      <!-- sortable：开启列排序功能 -->
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄" sortable></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>

      <!-- 自定义操作列： -->
      <!-- label：列标题为操作 -->
      <el-table-column label="操作">
        <!-- 作用域插槽：scope.row可获取当前行的完整数据 -->
        <template slot-scope="scope">
          <!-- 编辑按钮：点击触发handleEdit方法，传入当前行数据 -->
          <!-- 删除按钮：点击触发handleDelete方法，传入当前行数据 -->
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'TableDemo',
  data() {
    return {
      // 表格数据源：数组对象，每个对象对应一行数据
      tableData: [
        { name: '张三', age: 20, address: '北京市' },
        { name: '李四', age: 25, address: '上海市' },
        { name: '王五', age: 30, address: '广州市' }
      ]
    }
  },
  methods: {
    // 编辑行：row为当前行数据
    handleEdit(row) {
      console.log('编辑：', row);
    },
    // 删除行：row为当前行数据
    handleDelete(row) {
      console.log('删除：', row);
    }
  }
}
</script>

10. 弹框 / 提示类（Message/MessageBox/Dialog）

核心作用

  • Message：轻量提示（成功 / 失败 / 警告 / 信息）；
  • MessageBox：确认框 / 提示框（需用户交互）；
  • Dialog：自定义弹窗（承载复杂内容）。

基础示例

（1）Message 提示
javascript 复制代码 
<template>
  <div>
    <!-- 触发提示的按钮：点击触发showMessage方法 -->
    <el-button @click="showMessage">显示提示</el-button>
  </div>
</template>

<script>
export default {
  name: 'MessageDemo',
  methods: {
    showMessage() {
      // 成功提示：绿色背景，默认3秒消失
      this.$message.success('操作成功！');
      // 失败提示：红色背景
      // this.$message.error('操作失败！');
      // 警告提示：黄色背景
      // this.$message.warning('请注意！');
      // 信息提示：蓝色背景
      // this.$message.info('这是一条信息');
    }
  }
}
</script>
（2）MessageBox 确认框
javascript 复制代码 
<template>
  <div>
    <!-- 触发确认框的按钮：点击触发showConfirm方法 -->
    <el-button @click="showConfirm">显示确认框</el-button>
  </div>
</template>

<script>
export default {
  name: 'MessageBoxDemo',
  methods: {
    showConfirm() {
      // $confirm：确认框方法，返回Promise对象
      this.$confirm(
          '确定要删除这条数据吗？', // 确认框提示内容
          '提示',                 // 确认框标题
          {
            confirmButtonText: '确定', // 确认按钮文本
            cancelButtonText: '取消',  // 取消按钮文本
            type: 'warning'           // 确认框类型（警告样式）
          }
      ).then(() => {
        // 点击确定按钮的回调 $message 是提示框方法，返回Promise对象
        // $message 是 UI 库（如 Element UI）通过 Vue.prototype 全局挂载的 消息提示工具方法
        // $message 本身是一个「消息提示工具对象」
        this.$message.success('删除成功！');
      }).catch(() => {
        // 点击取消/关闭按钮的回调
        this.$message.info('已取消删除');
      });
    }
  }
}
</script>
（3）Dialog 自定义弹窗

Element-UI（Vue2 版本）的 Dialog 组件不支持 v-model 绑定显示状态 （v-model 是 Element-Plus/Vue3 版本的用法）

Element-UI 2.x 需用 :visible.sync 来绑定弹窗的显示 / 隐藏状态。

javascript 复制代码 
<template>
  <div>
    <!-- 打开弹窗的按钮：点击将dialogVisible设为true，显示弹窗 -->
    <el-button @click="dialogVisible = true">打开弹窗</el-button>
    <!-- 自定义弹窗组件： -->
    <!-- width：弹窗宽度，值为30% -->
    <!-- before-close：弹窗关闭前的回调函数 -->
    <!-- title：弹窗标题文本 -->
    
    <!-- visible.sync：Element-UI 2.x 专用，绑定弹窗显示状态（true显示/false隐藏）
         v-model 绑定显示状态（v-model 是 Element-Plus/Vue3 版本的用法）-->
    <!-- 核心修正：替换v-model为:visible.sync ,Element-UI（Vue2 版本）-->
    <el-dialog
        title="自定义弹窗"
        :visible.sync="dialogVisible"   width="30%"
        :before-close="handleClose"
    >
    <!-- 弹窗主体内容：自定义HTML -->
    <div>这是弹窗内的自定义内容</div>

    <!-- 弹窗底部插槽：自定义底部按钮 -->
    <span slot="footer" class="dialog-footer">
        <!-- 取消按钮：点击将dialogVisible设为false，隐藏弹窗 -->
        <el-button @click="dialogVisible = false">取消</el-button>
      <!-- 确定按钮：点击将dialogVisible设为false，隐藏弹窗 -->
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DialogDemo',
  data() {
    return {
      // 弹窗显示状态，默认隐藏
      dialogVisible: false
    }
  },
  methods: {
    // 弹窗关闭前的回调：done为关闭弹窗的函数
    handleClose(done) {
      // 二次确认是否关闭弹窗
      this.$confirm('确定要关闭弹窗吗？').then(() => {
        done(); // 执行done()才会真正关闭弹窗
      }).catch(() => {}); // 取消则不执行done()，弹窗保持显示
    }
  }
}
</script>

11. 分页（Pagination）

核心作用

配合表格 / 列表实现数据分页，支持页码切换、每页条数切换、总数展示等。

基础示例

javascript 复制代码 
<template>
  <div>
    <!-- 分页组件： -->
    <!-- size-change：每页条数变化时的回调函数 -->
    <!-- current-change：当前页码变化时的回调函数 -->
    <!-- current-page：绑定当前页码 -->
    <!-- page-sizes：可选的每页条数列表 -->
    <!-- page-size：绑定当前每页条数 -->
    <!-- layout：分页组件的显示布局（总数、条数选择、上一页、页码、下一页、跳页） -->
    <!-- total：绑定数据总条数 -->
    <!-- style：分页组件样式（上外边距20px，文字右对齐） -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px; text-align: right"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'PaginationDemo',
  data() {
    return {
      // 当前页码，默认第1页
      currentPage: 1,
      // 每页条数，默认10条/页
      pageSize: 10,
      // 数据总条数，通常从后端接口获取
      total: 90
    }
  },
  methods: {
    // 每页条数变化的回调：val为新的每页条数
    handleSizeChange(val) {
      console.log('每页条数变为：', val);
      this.pageSize = val;
      // 重新请求后端接口，获取对应每页条数的数据
    },
    // 当前页码变化的回调：val为新的页码
    handleCurrentChange(val) {
      console.log('当前页变为：', val);
      this.currentPage = val;
      // 重新请求后端接口，获取对应页码的数据
    }
  }
}
</script>

入门小贴士

  1. 所有组件的 v-model 均为双向绑定，是数据交互的核心；
  2. 组件的事件（如 @click/@change）需在 methods 中定义处理函数；
  3. 组件的属性（如 disabled/border）可通过布尔值 / 字符串 / 数字控制样式和行为；
  4. 遇到问题可直接查阅 Element-UI 官方文档（入门最权威参考）。https://element.eleme.cn/#/zh-CN
相关推荐
掘了21 分钟前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅24 分钟前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅1 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅1 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment1 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅1 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊2 小时前
jwt介绍
前端
爱敲代码的小鱼2 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
吹牛不交税2 小时前
admin.net-v2 框架使用笔记-netcore8.0/10.0版
vue.js·.netcore
Cobyte2 小时前
AI全栈实战：使用 Python+LangChain+Vue3 构建一个 LLM 聊天应用
前端·后端·aigc
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04Linux下V2Ray安装配置指南05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06UV安装并设置国内源07Claude Code Skills 实用使用手册08一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示09使用 1panel面板 部署 php网站10Vue-skills的中文文档