技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

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

 收录于 Vue Ui
   约 6582 字   预计阅读 14 分钟 
https://bing.ee123.net/img/rand?artid=146143658

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

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

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

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

  • Element-Plus的网址（国内镜像）：
（1）el-input。(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>

https://i-blog.csdnimg.cn/direct/58851f6494174532bfa545c91de9eef0.png

<2>el-input的disable状态。
  • el-input处于disable状态时，不能输入任何值。输入框被禁用！
<el-input v-model="data.input" style="width: 240px" placeholder="请输入内容" disabled/>{{data.input}}

https://i-blog.csdnimg.cn/direct/67e610960a3a45a7a1d88255cd6cf3a2.png

<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:'岁岁岁平安真的帅！',
})

https://i-blog.csdnimg.cn/direct/8b4c358944cd4a85a6a82589027a3c38.png

<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";

https://i-blog.csdnimg.cn/direct/1c9a89f5e31e46c2954e83cd2930715e.png

  • 属性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";

https://i-blog.csdnimg.cn/direct/e94e05e8754c47f999838bdc7af6de39.png

  • 为了不让其占整行，手动设置宽度（width）即可。
<!-- 默认占整行。可以通过设置width调整宽度 -->
<el-input style="width: 200px" placeholder="日期选择" readonly :suffix-icon="Calendar"/>

https://i-blog.csdnimg.cn/direct/165a9f4ce43d4e4db719170056cc464c.png

<5>el-input的文本域(type=“textarea”)。
  • 当需要展示的文字比较多时，输入框内的内容就会被压缩。

https://i-blog.csdnimg.cn/direct/57de484b654f4ebf9d2a8c2d50fbd1f2.png

  • 首先可以设置宽度(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:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',

})

https://i-blog.csdnimg.cn/direct/36d2efa7313e485183842d91d14ba978.png

<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"/>

https://i-blog.csdnimg.cn/direct/9549def545f341e5951945ffed7a07bf.png

https://i-blog.csdnimg.cn/direct/124ed5bf444b438fba6981a2ae8a99f9.png

（2）el-select。(select选择下拉框)
  • 外标签： 。
  • 内标签： 。
<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:['苹果','香蕉','橘子'],

})

https://i-blog.csdnimg.cn/direct/4b4f309569924ee5abec91428cd31d17.png

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

https://i-blog.csdnimg.cn/direct/cadc4eaba72244e2aa1e3b9c54468f19.png

<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相同。它还是是同一个对象。

https://i-blog.csdnimg.cn/direct/7645149ee8ab489ebf33f891675355b1.png

<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不一样

https://i-blog.csdnimg.cn/direct/314c1ef0188a46eea1305f4895a0220e.png

<4>key不一样。value不一样。label一样。(设置value-key属性)
  • 通过使用"value-key=id"可以保证对象的唯一性 。

https://i-blog.csdnimg.cn/direct/9a4e176c8641453c9d5e5e97eb15476d.png

<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一致。达成的效果是可以的。

https://i-blog.csdnimg.cn/direct/498c7e75e5f2447a971e8919dd9c0b3f.png

（3）el-radio-group。(Radio单选框)
  • 官网详细。分析属性“label”与“value”。

https://i-blog.csdnimg.cn/direct/c654c37814b44317a3625655d2174248.png

  • 外标签： 。
  • 内标签： 。
<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:'男'

})

https://i-blog.csdnimg.cn/direct/bebaede6b23f4f2693b787693240cfea.png

<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:'男'

})

https://i-blog.csdnimg.cn/direct/a29119e4c3bc4fe7b45d71c0d247c293.png

<4>单选框——按钮组样式。
  • 官方文档。

https://i-blog.csdnimg.cn/direct/982fdece803549d39106f5b6c05e73d1.png

  • 代码示例。
<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",

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

https://i-blog.csdnimg.cn/direct/5ae5c8f5d943434eb28f84f6fd4e45bc.png

  • 具体自定义主题的详细教学的博客链接：

https://i-blog.csdnimg.cn/direct/a6b7523a7a0d44109a93c174fa737cbd.png

（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的值 。

https://i-blog.csdnimg.cn/direct/8281cce821884e9abe5937a82afa7bf5.png

https://i-blog.csdnimg.cn/direct/ea08bb18a08d4306a00d5b06ef6b8943.png

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

https://i-blog.csdnimg.cn/direct/97215b5e1d8e4834a48b49d4d63d700d.png

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

https://i-blog.csdnimg.cn/direct/41093f00474047d8ac3af6c71eca0d17.png

  • 原生图片标签： 。

  • element-plus：<el-

    image

    。

<1>原生图片标签img。
  • 代码示例。
<div style="margin: 30px">
      <img src="@/assets/logo.svg" alt="vue" width="150px">
</div>

https://i-blog.csdnimg.cn/direct/c32193da6dca4ac287062ac35b1954b2.png

<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>

https://i-blog.csdnimg.cn/direct/0d0255e2762742c7a2eb571df17932fc.png

  • 当然也可以使用: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'

})

https://i-blog.csdnimg.cn/direct/34527f64fd144de9892c1c9fc44fd1eb.png

<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'

https://i-blog.csdnimg.cn/direct/929e6e422fbf44bc96bc5d054127e1c8.png

<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',
  ]

})

https://i-blog.csdnimg.cn/direct/8f64db7958284f3186a6489bc6ddec47.png

更新于 2025-03-10
 学习, 前端, Vue, Vue, Plus, Elementui
返回 | 主页