04. Element-Plus组件使用速成

2012 字约 5 分钟读完8091 次阅读更新于 2026/5/3

文本框 el-input

基本使用

<el-input v-model="data.input" style="width: 240px" placeholder="请输入内容">

import {reactive} from "vue";

const data = reactive({
  input: '青哥哥棒棒哒',
})

disabled 和 readonly 可以只显示文本 无法输入

<el-input v-model="data.input" style="width: 240px" disabled />

<el-input v-model="data.input" style="width: 240px" readonly />

前置图标 prefix-icon 和 后缀图标 suffix-icon，注意需要单独导入图标

（import {Calendar, Search} from "@element-plus/icons-vue"）

<el-input v-model="data.input" style="width: 240px" placeholder="请输入内容" :prefix-icon="Search"  /> 

<el-input style="width: 200px" :suffix-icon="Calendar"></el-input>

添加 type="textarea" 变成多行文本

<el-input type="textarea" v-model="data.descr" style="width: 300px" placeholder="请输入一段描述"></el-input>

可清空内容的属性 clearable

<el-input clearable v-model="data.input" style="width: 240px" placeholder="请输入内容" />

下拉框 el-select

基本使用方法

<el-select
    v-model="data.value"
    placeholder="请选择水果"
    style="width: 240px"
>
  <el-option
      v-for="item in data.options"
      :key="item.id"
      :label="item.name"
      :value="item.name"
  />
</el-select>

import {reactive} from "vue";
  
const data = reactive({
  value: '',
  options: [{id: 1, name: '苹果'}, {id: 2, name: '香蕉'}, {id: 3,name: '桃子'}, {id: 4, name: '苹果'},]
})

v-for 里的 key 绑定的数据是唯一的， 比如 id 就是唯一的

 options: [{id: 1, name: '苹果'}, {id: 2, name: '香蕉'}, {id: 3,name: '桃子'}, {id: 4, name: '苹果'},]

多选可设置 <font style="color:rgb(48, 49, 51);">multiple</font> 属性

如果 Select 的绑定值为对象类型，请务必指定 <font style="color:rgb(48, 49, 51);">value-key</font> 作为它的唯一性标识。

通过使用 <font style="color:rgb(48, 49, 51);">value-key</font> 属性，可以正确处理带有重复label的数据。 这样虽然<font style="color:rgb(48, 49, 51);">label</font> 是重复的，但任可通过 <font style="color:rgb(48, 49, 51);">id</font> 来确认唯一性。

<el-select
    clearable
    multiple
    value-key="id"
    v-model="data.value"
    placeholder="请选择水果"
    style="width: 240px"
>
  <el-option
      v-for="item in data.options"
      :key="item.id"
      :label="item.label"
      :value="item.name"
  />
</el-select> {{ data.value }}

options: [{id: 1, label: '苹果', name: '苹果1'}, {id: 2,  label: '香蕉', name: '香蕉'},
    {id: 3,  label: '桃子',name: '桃子'}, {id: 4, label: '苹果', name: '苹果2'},]

单选按钮 el-radio

基本使用

<el-radio-group v-model="data.sex">
  <el-radio value="男">男</el-radio>
  <el-radio value="女">女</el-radio>
</el-radio-group>

单选按钮组，常用于页面内容切换

注意： 要保证 v-model 里面的值跟 value 的值对应上

<el-radio-group style="margin-left: 100px" v-model="data.tag" size="large">
  <el-radio-button label="我发布的内容" value="1" />
  <el-radio-button label="我点赞的内容" value="2" />
  <el-radio-button label="我收藏的内容" value="3" />
</el-radio-group>

const data = reactive({
  tag: '3'
})

多选按钮 el-checkbox

基本用法

多选框 绑定的是 数组，数组里面存储的是 value 绑定的值

<el-checkbox-group v-model="data.checkList">
  <el-checkbox v-for="item in data.options" :key="item.id" :value="item.name" :label="item.label" />
</el-checkbox-group>

options: [{id: 1, label: '苹果', name: '苹果1'}, {id: 2,  label: '香蕉', name: '香蕉'},
    {id: 3,  label: '桃子',name: '桃子'}, {id: 4, label: '苹果', name: '苹果2'},],
checkList: []

图片 el-image

图片渲染、旋转、放大、缩小

细节：el-image 使用网络图片地址是可以渲染图片的，但是使用本地的图片路径却无法渲染

el-image 如果想使用本地的图片路径，必须先导入

<el-image :src="img"  style="width: 100px; margin-left: 100px" />

import img from '@/assets/logo.svg'

赞？三连？

预览图片 :preview-src-list

<el-image :src="img"  style="width: 100px; margin-left: 100px"  :preview-src-list="[img, 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg']" />

基本使用

<el-carousel height="400px" style="width: 550px">
  <el-carousel-item v-for="item in data.imgs" :key="item">
    <img style="width: 100%; height: 400px" :src="item" alt="">
  </el-carousel-item>
</el-carousel>

import lun1 from '@/assets/lun1.png'
import lun2 from '@/assets/lun2.png'
import lun3 from '@/assets/lun3.png'

const data = reactive({
  imgs: [lun1, lun2, lun3]
})

日期时间 el-date-picker

日期 2024-10-11

使用<font style="color:rgb(48, 49, 51);">format</font>指定输入框的格式。 使用 <font style="color:rgb(48, 49, 51);">value-format</font> 指定绑定值的格式。

在实际的使用过程中，我们会同时设置 format 和 value-format

<el-date-picker v-model="data.date" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择日期" />

时间 16:04:43

<el-date-picker
    style="margin-left: 50px"
    v-model="data.time"
    type="datetime"
    placeholder="请选择时间"
    format="HH:mm:ss"
    value-format="HH:mm:ss"
/>

日期时间 2024-10-11 16:04:43

<el-date-picker
    style="margin-left: 50px"
    v-model="data.date1"
    type="datetime"
    placeholder="请选择日期时间"
    format="YYYY-MM-DD HH:mm:ss"
    value-format="YYYY-MM-DD HH:mm:ss"
/>

日期范围 data.daterange 是一个数组 数组里面有 2 个值，第一个是开始日期 第二个是结束日期

<el-date-picker
    style="margin-left: 50px"
    v-model="data.daterange"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
/>

数据表格 el-table

基本的使用

<el-table :data="data.tableData" style="width: 100%" stripe>
  <el-table-column prop="date" label="日期" width="180" />
  <el-table-column prop="name" label="名称" width="180" />
  <el-table-column prop="address" label="地址" />
</el-table>

tableData: [
  {  date: '2024-10-11', name: '亲哥哥哥', address: '安徽合肥' },
  {  date: '2024-10-12', name: '小鲁班', address: '上海浦东' },
  {  date: '2024-10-13', name: '小妲己', address: '北京大兴' },
]

stripe： 斑马纹属性

border：边框属性

<template #default="scope"> 拿到行对象的数据

<el-table :data="data.tableData" style="width: 100%" stripe border>
  <el-table-column prop="date" label="日期" width="180" />
  <el-table-column prop="name" label="名称" width="180" />
  <el-table-column prop="address" label="地址" />
  <el-table-column label="操作">
    <template #default="scope">
      <el-button type="danger" circle @click="del(scope.row.id)">
        <el-icon><Delete /></el-icon>
      </el-button>
    </template>
  </el-table-column>
</el-table>

const del = (id) => {
  alert("删除ID=" + id + " 的数据")
}

分页组件 el-pagination

v-model:current-page: 当前的页码

v-model:page-size： 当前的每页的个数

total： 总共的数据个数

layout 是分页的各种组件的表现集合

<el-pagination
  v-model:current-page="data.currentPage"
  v-model:page-size="data.pageSize"
  :page-sizes="[5, 10, 15, 20]"
  background
  layout="total, sizes, prev, pager, next, jumper"
  :total="47"
  />

Dialog 弹窗

dialogVisible 控制弹窗显示的变量

主要作用是：新增、编辑数据

<el-dialog v-model="data.dialogVisible" title="编辑行对象" width="500">
  <div style="padding: 20px">
    <div style="margin-bottom: 10px">日期：{{ data.row.date }}</div>
    <div style="margin-bottom: 10px">名称：{{ data.row.name }}</div>
    <div>地址：{{ data.row.address }}</div>
  </div>
</el-dialog>