当前位置：首页 > article >正文

Vue3实战学习（Element-Plus常用组件的使用(输入框、下拉框、单选框多选框、el-image图片)）(上)(5)

article 2025/3/13 3:54:43

目录

一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下)

二、Element-Plus常用组件使用。

（1）el-input。(input输入框)

<1>正常状态的el-input。

<2>el-input的disable状态。

<3>el-input的readonly状态。

<4>el-input的Icon(图标)用法。

测试使用"搜索"的图标。

测试使用"日历"的图标。

<5>el-input的文本域(type="textarea")。

<6>el-input的clearable(可清空)状态。

（2）el-select。(select选择下拉框)

<1>使用v-for+数组+值。

<2>使用v-for+数组+对象。

value不一样。

value一样。key不一样。label一样。

<3>el-select的clearable(可清除)、multiple(多选下拉框)状态。

<4>key不一样。value不一样。label一样。(设置value-key属性)

（3）el-radio-group。(Radio单选框)

<1>不设置默认选中。

<2>设置默认选中。

<3>使用label属性设置展示值。

<4>单选框——按钮组样式。

（4）el-checkbox-group。(Checkbox多选框)

使用v-for形式渲染多选项框。(代码示例)

（5）el-image。(Image图片)

<1>原生图片标签img。

<2>el-image使用"网络地址"渲染图片。

<3>el-image使用"本地图片路径地址"渲染图片。

<4>el-image设置多张图片预览(放大、缩小、旋转、上下一张等等)。

一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下)

Vue3实战学习（Vue环境配置、快速上手及卸载、下载安装Node.js超详细教程(2025)、npm配置淘宝镜像）(1)-CSDN博客
Vue3实战学习（IDEA中打开、启动与搭建Vue3工程极简脚手架教程(2025超详细教程)、Windows系统命令行启动Vue3工程）(2)-CSDN博客
Vue3实战学习（Vue3的基础语法学习与使用(超详细)）(3)-CSDN博客
Vue3实战学习（Vue3集成Element-Plus(常用依赖、插件安装与导入。按钮、图标组件。自定义主题的实现)(超详细)）(4)-CSDN博客

注意：本篇博客是《Element-Plus常用组件的使用》的上篇。
只是讲解与演示了一部分的常用组件的使用，还有更多的组件使用学习在下篇！

二、Element-Plus常用组件使用。

Element-Plus的网址（国内镜像）：一个 Vue 3 UI 框架 | Element Plus

（1）el-input。(input输入框)

标签<el-input>。

<1>正常状态的el-input。

必须使用v-model绑定值。否则输入框无法进行内容的修改。

<template>
  <div>

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

  </div>

</template>

<script setup>

import {reactive} from "vue";

//定义数据的常用方式
const data = reactive({
  input:null,
})

</script>

<2>el-input的disable状态。

el-input处于disable状态时，不能输入任何值。输入框被禁用！

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

<3>el-input的readonly状态。

el-input处于readonly状态时，也是不能进行输入框的输入或修改。只读状态！

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

import {reactive} from "vue";
//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
})

<4>el-input的Icon(图标)用法。

测试使用"搜索"的图标。

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

import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";

属性size可以设置el-input的大小。一般情况下自动为默认大小。

<el-input v-model="data.input" style="width: 240px;margin-bottom:10px" placeholder="请输入内容" readonly :prefix-icon="Search"/>{{data.input}}
<el-input v-model="data.input"  size="small" style="width: 240px;margin-bottom:10px" placeholder="请输入内容" readonly :prefix-icon="Search"/>

测试使用"日历"的图标。

<el-input placeholder="日期选择" readonly :suffix-icon="Calendar"/>

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

为了不让其占整行，手动设置宽度（width）即可。

<!-- 默认占整行。可以通过设置width调整宽度 -->
<el-input style="width: 200px" placeholder="日期选择" readonly :suffix-icon="Calendar"/>

<5>el-input的文本域(type="textarea")。

当需要展示的文字比较多时，输入框内的内容就会被压缩。

首先可以设置宽度(width)。重点是：添加type="textarea"。

<div style="margin: 30px;">
      <el-input type="textarea" v-model="data.describe" style="width: 350px" placeholder="日期选择"/>
</div>

import {reactive} from "vue";
//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',

})

<6>el-input的clearable(可清空)状态。

"clearable"的作用：可以使用清除图标来清除所有的输入。

<el-input v-model="data.input" clearable style="width: 240px;margin-bottom:10px;margin-left: 20px" placeholder="请输入内容"  :prefix-icon="Search"/>

（2）el-select。(select选择下拉框)

外标签：<el-select>。
内标签：<el-option>。

<1>使用v-for+数组+值。

el-option配置"v-for"快速遍历所有的下拉框选项。(常用方法)
一般情况下data.value是设置为''(空)，由用户选择后将值绑定给指定变量。
而数组options是从数据库拿取过来的，然后依次渲染下拉框的所有选项。

<div style="margin: 30px">
      <el-select
          v-model="data.value"
          placeholder="请选择水果"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-for="item in data.options"
            :key="item"
            :label="item"
            :value="item"
        />
</el-select> <span style="margin-left: 10px">{{data.value}}</span>
</div>

import {reactive} from "vue";
//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:['苹果','香蕉','橘子'],

})

这里的下拉框选定的值绑定data.value。使用"{{}}"直观展示选项是否绑定值。

<2>使用v-for+数组+对象。

value不一样。

<div style="margin: 30px">
      <el-select
          v-model="data.value"
          placeholder="请选择水果"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-for="item in data.options"
            :key="item.name"
            :label="item.name"
            :value="item.name"
        />
      </el-select> <span style="margin-left: 10px">{{data.value}}</span>

</div>

import {reactive} from "vue";
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {name:'苹果'},
      {name:'香蕉'},
      {name:'橘子'},
  ],

})

value一样。key不一样。label一样。

<div style="margin: 30px">
      <el-select
          v-model="data.value"
          placeholder="请选择水果"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-for="item in data.options"
            :key="item.id"
            :label="item.name"
            :value="item.name"
        />
      </el-select> <span style="margin-left: 10px">{{data.value}}</span>

</div>

import {reactive} from "vue";
//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,name:'苹果'},
      {id:2,name:'香蕉'},
      {id:3,name:'橘子'},
      {id:4,name:'苹果'},

  ],

})

实际当选中某两个相同value时，虽然id不同，但是它们还是同时被选中了。
证明id不一致。只要lable相同、value相同。它还是是同一个对象。

<3>el-select的clearable(可清除)、multiple(多选下拉框)状态。

"clearable"的作用：可以使用清除图标来清除选择。
"multiple"的作用：使下拉单选择变成下拉多选框。

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

</div>

import {reactive} from "vue";
import {Calendar, Search} from "@element-plus/icons-vue";

//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,name:'苹果'},
      {id:2,name:'香蕉'},
      {id:3,name:'橘子'},
      {id:4,name:'苹果'},

  ],

})

通过程序的运行。可以发现虽然id不一样、value不一样

<4>key不一样。value不一样。label一样。(设置value-key属性)

通过使用"value-key=id"可以保证对象的唯一性。

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

</div>

import {reactive} from "vue";

const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},

  ],

})

可以很清楚的看到：虽然多项选择的标签其中有两个选择的是"苹果"（因为label相同），但实际后台绑定的值是"苹果"和"苹果1"。
证明id不一致、value不一致、label一致。达成的效果是可以的。

（3）el-radio-group。(Radio单选框)

官网详细。分析属性“label”与“value”。

外标签：<el-radio-group>。
内标签：<el-radio>。

<1>不设置默认选中。

<div style="margin: 30px">
      <el-radio-group v-model="data.sex">
        <el-radio value="男">男</el-radio>
        <el-radio value="女">女</el-radio>
      </el-radio-group>
</div>

import {reactive} from "vue";

const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},
  ],
  sex:''

})

<2>设置默认选中。

给绑定的data.sex赋值默认为"男"即可完成。

import {reactive} from "vue";

const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},
  ],
  sex:'男'

})

<3>使用label属性设置展示值。

<div style="margin: 30px">
      <el-radio-group v-model="data.sex">
        <el-radio value="男" label="男"></el-radio>
        <el-radio value="女" label="女"></el-radio>
      </el-radio-group> <span style="margin-left: 20px">{{data.sex}}</span>
</div>

import {reactive} from "vue";

const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},
  ],
  sex:'男'

})

<4>单选框——按钮组样式。

官方文档。

代码示例。

<div style="margin: 30px">
      <el-radio-group v-model="data.tar" size="large">
      <el-radio-button label="我喜欢的" value="1" />
      <el-radio-button label="我收藏的" value="2" />
      <el-radio-button label="我下载的" value="3" />
      </el-radio-group>
</div>

import {reactive} from "vue";

const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},
  ],
  sex:'男',
  tar:"1",

})

之所以和官网的颜色有差别，是因为博主自定义了主题颜色。

具体自定义主题的详细教学的博客链接：Vue3实战学习（Vue3集成Element-Plus(常用依赖、插件安装与导入。按钮、图标组件。自定义主题的实现)(超详细)）(4)-CSDN博客

（4）el-checkbox-group。(Checkbox多选框)

外标签：<el-checkbox-group>。
内标签：<el-checkbox>。

在表格的案例中经常需要使用这种功能。（表格的批量多选导出操作）
使用v-for形式渲染多选项框。(代码示例)

<div style="margin: 30px">
      <el-checkbox-group v-model="data.checkList">
        <el-checkbox v-for="item in data.options"
        :key="item.id"
        :label="item.label"
        :value="item.name"
        />
      </el-checkbox-group> <span style="margin-left: 20px">{{data.checkList}}</span>
</div>

import {reactive} from "vue";

//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},
  ],
  sex:'男',
  tar:"1",
  checkList:[],


})

数组data.checkLists里存储的值是数组data.options的对应选择的item.name的值。

disabled状态。

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

（5）el-image。(Image图片)

官方文档。这是element-plus提供的一个强大的图片渲染标签。
可以使图片预览更加多元化：放大、缩小、旋转、上下一张等等。

原生图片标签：<img>。
element-plus：<el-image>。

<1>原生图片标签img。

代码示例。

<div style="margin: 30px">
      <img src="@/assets/logo.svg" alt="vue" width="150px">
</div>

<2>el-image使用"网络地址"渲染图片。

<div style="margin: 30px">
      <img src="@/assets/logo.svg" alt="vue" width="150px">
      <el-image style="width: 150px;margin-left: 15px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
</div>

当然也可以使用:src绑定图片网络地址。

 <div style="margin: 30px">
      <img src="@/assets/logo.svg" alt="vue" width="150px">
      <el-image style="width: 150px;margin-left: 15px" :src="data.url" />
      <el-image style="width: 150px;margin-left: 15px" :src="img" />
</div>

import {reactive} from "vue";

//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},
  ],
  sex:'男',
  tar:"1",
  checkList:[],
  url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'

})

<3>el-image使用"本地图片路径地址"渲染图片。

使用import导入对应图片路径地址即可。

<div style="margin: 30px">
      <img src="@/assets/logo.svg" alt="vue" width="150px">
      <el-image style="width: 150px;margin-left: 15px" :src="img" />
</div>

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

<4>el-image设置多张图片预览(放大、缩小、旋转、上下一张等等)。

应用场景：给商品设置多张预览图片！

<div style="margin: 30px">
      <el-image style="width: 150px;margin-left: 15px" :src="data.url" :preview-src-list="data.urlList "/>
</div>

import {reactive} from "vue";

//定义数据的常用方式
const data = reactive({
  input:'岁岁岁平安真的帅！',
  describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',
  value:'',
  options:[
      {id:1,label:'苹果',name:'苹果'},
      {id:2,label:'香蕉',name:'香蕉'},
      {id:3,label:'橘子',name:'橘子'},
      {id:4,label:'苹果',name:'苹果2'},
  ],
  sex:'男',
  tar:"1",
  checkList:[],
  url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  urlList:[
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  ]

})