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
相关推荐
大猩猩X1 小时前
vue vxe-gantt table 甘特图实现多个维度视图展示，支持切换年视图、月视图、周视图等
前端·javascript·甘特图·vxe-table·vxe-ui
游九尘1 小时前
js：获取上一周，本周，下一周，上个月，本月，下个月的日期时间段
javascript
向上的车轮1 小时前
从“能用”到“好用”：基于 DevUI 构建高维护性、多端自适应的企业级前端架构实践
前端·架构
街灯L1 小时前
【Photoshop】使用滤镜库的玻璃效果制造金箔质感贴图
ui·制造·photoshop
脾气有点小暴1 小时前
H5 跳转方式
前端·javascript
ghfdgbg1 小时前
11. 后端Web实战：登录认证（令牌 + 过滤器 + 拦截器）
前端
Doris8931 小时前
【JS】JS进阶--作用域、函数、解构赋值、数组方法
开发语言·前端·javascript
黑客思维者1 小时前
核弹级漏洞突袭React生态：RSC反序列化何以成为RCE通道？
前端·javascript·react.js·远程代码执行漏洞
K3v1 小时前
【npm install sentry/cli】安装这个破包一直失败
前端·npm·sentry
热门推荐
01GitHub 镜像站点02【超详细教程】手把手教你从微软官网免费下载Windows 10官方原版ISO镜像（2025最新版）03智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践04安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）05React CVE-2025-55182漏洞排查与修复指南06UV安装并设置国内源07BongoCat - 跨平台键盘猫动画工具08打造高效订单处理！ZKmall开源商城的统一履约中心架构解析09本地部署阿里最新开源的Z-Image10Linux下V2Ray安装配置指南