Element-plus组件库基础组件使用

news2024/12/23 15:31:30

文章目录

      • 按钮
      • 图标
      • 输入框
      • 表格
      • 表单
      • 对话框
      • 文件上传
      • 布局容器
      • ElMessage消息提示
      • MessageBox 消息提示框
      • Pagination分页样式
      • 表单校验

记录vue3项目使用element-Plus,开发中常用的一些样式

下面这些组件是写增删改查是经常用到的,学习了这个写增删改查会好很多。

按钮

按钮是 el-button
基本的按钮 default 默认 primary基础蓝色 success info warning警告 Danger 危险
image.png

通过type属性 指定颜色     round  plain cycle指定形状 
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>

image.png
不输入文字,展示标签 :icon

通过:icon 绑定  需要导入对应的标签样式  @element-plus/icos-vue
<el-button type="warning" :icon="Star" circle />
<el-button type="danger" :icon="Delete" circle />

import {
  Check,  //确定
  Delete, //删除
  Edit, //编辑
  Message, //信息
  Search, //搜索
  Star, //星
} from '@element-plus/icons-vue'

通过size属性来控制大小
image.png
想要显示图片+文字

<el-button type="danger" :icon="Delete" circle> 删除</el-button>

图标

https://element-plus.org/zh-CN/component/icon.html#%E7%BB%93%E5%90%88-el-icon-%E4%BD%BF%E7%94%A8
常用的一些图标
image.png
使用图标的时候需要导入图标库

  import{} from @element-plus/icons-vue

输入框

image.png
image.png

v-model 绑定数据模型   placeholder 提示输入  clearable 是否直接清除  type指定类型 showpassword是否显示密码
  <el-input
    v-model="input"
    style="width: 240px"
    placeholder="请输入用户名"
    clearable
    />
    <el-input
      v-model="input"
      type="password"
      placeholder="请输入密码"
      show-password
      clearable
      />

其他属性
image.png

表格

:data绑定数据模型。 prop绑定模型里面具体的数据、label这一列的名称

表格是 el-table     
每一列用prop绑定对象的属性。label展示的是这一列的名称。

在js里面定义这个数组
const dataData=ref([])
  <el-table :data="tableData" style="width: 100%" height="250">
  <el-table-column fixed prop="date" label="Date" width="150" />
  <el-table-column prop="name" label="Name" width="120" />
  <el-table-column prop="state" label="State" width="120" />
  <el-table-column prop="city" label="City" width="320" />
  <el-table-column prop="address" label="Address" width="600" />
  <el-table-column prop="zip" label="Zip" />
  </el-table>

image.png

如果表格里面还要添加其他的数据,比如绑定按钮开关按钮等。
代码需要写在template里面。 但是这样写如何获取数据么? element团队提供了插槽 通过**#default=“scope”**绑定了多用于,想要拿这一行数据通过 scope.row 得到。再拿到里面的具体状态。

<el-table-column label="状态">
   实现开关按钮
  <template #default="scope">   //scope.row拿到当前行的数据
    <el-switch v-model="scope.row.status"></el-switch>
  </template>
</el-table-column>

通过scope得到当前的行  scope.row 得到当前行的数据

表格想要添加选择框和排列序号

type selection 选择框   index 序号

<el-table-column type="selection" width="150"/>  //前面的选择框
<el-table-column type="index" width="120" label="序号"/> //序号进行排序的

表单

//表单也是常用的ui。    :model 绑定模型      :inline表示当前是否在一行内  v-show 是否展示
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="90px">
  <el-form-item label="合作商名称" prop="partnerName">
    <el-input
      v-model="queryParams.partnerName"
      placeholder="请输入合作商名称"
      clearable
      @keyup.enter="handleQuery"
      />
    </el-form-item>
  <el-form-item>
    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  </el-form-item>
</el-form>

对话框

 <!-- 添加或修改点位管理对话框 -->//标题  title     v-model true展示 false
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
        //ref    :rules绑定校验规则   :model 绑定模型
//在这个例子中,ref="nodeRef" 为 el-form 组件(即 Element Plus 的表单组件)创建了一个引用,命名为 nodeRef。
      <el-form ref="nodeRef" :model="form" :rules="rules" label-width="80px">
           //label 标题   prop校验规则
        <el-form-item label="点位名称" prop="nodeName">
          <el-input v-model="form.nodeName" placeholder="请输入点位名称"/>
        </el-form-item>

        <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入详细地址"/>
        </el-form-item>
/**v-for="dict in bussiness_type": 使用 v-for 指令循环遍历 bussiness_type 数组,生成多个 el-option 组件。
:key="dict.value": 使用 dict.value 作为每个 el-option 的唯一键,确保 Vue 能高效地渲染和更新选项。
:label="dict.label": 设置选项的显示文本为 dict.label。
:value="parseInt(dict.value)": 设置选项的值为 dict.value,并通过 parseInt 转换为整数。这个值将绑定到 form.businessType 中。
**/
        <el-form-item label="商圈类型" prop="businessType">
          <el-select v-model="form.businessType" placeholder="请选择商圈类型">
         //下拉菜单
            <el-option
                v-for="dict in bussiness_type"
                :key="dict.value"
                :label="dict.label"
                :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="区域ID" prop="regionId">
          <el-input v-model="form.regionId" placeholder="请输入区域ID"/>
        </el-form-item>

        <el-form-item label="合作商ID" prop="partnerId">
          <el-input v-model="form.partnerId" placeholder="请输入合作商ID"/>
        </el-form-item>

      </el-form>
              //绑定插槽
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

文件上传

<el-upload
    action="/api/upload"  //向后端请求的地址
    name="file" //文件名称
    auto-upload:true  //是否是自动上传
    :on-success="handleCovergeSuccess">//上传成功的回调函数
  <el-button type="primary">请选择上传视频封面</el-button>
</el-upload>
const handleSuccess = (result) => {
//响应的结果      //返回的是服务器上面的地址
console.log(result.data)
VideoData.value.videoUrl = result.data  //回调 后端返回文件在服务器上面的地址 前端拿到赋值给视频的地址。点击投稿后数据库中存放的是视频的URL
ElMessage.success('success')  //弹出消息成功
}

布局容器

<el-container>:外层容器。
  当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列, 否则会水平左右排列。

<el-header>:顶栏容器。

<el-aside>:侧边栏容器。

<el-main>:主要区域容器。

<el-footer>:底栏容器。

vue3中的创建属性使用的是ref,这个创建的是对象,如果想要获取属性需要通过.value拿到
自动展开:当传递响应式对象给一个函数时,vue3会自动响应处理系统,使得可以直接传递整个对象而不用手动解包.value属

image.png

ElMessage消息提示

方法成功后需要提示消息,用的ElMessage。

import { ElMessage } from 'element-plus'

ElMessage.error('服务异常');
ElMessage.success('登录成功!')
<script setup>
import {
  Search, Download, Upload, ArrowRight
} from '@element-plus/icons-vue'
import  {ElMessage} from 'element-plus'
  //箭头函数
const show=()=>{
  // ElMessage.success('成功')
  ElMessage.error('失败')
}
</script>

<template>
<el-button  type="primary" :icon="Search" @click="show()">登录按钮</el-button>
</template>

MessageBox 消息提示框

  //confirm确认吗   内容 标题   确定按钮 取消按钮  then成功回调函数  catch 取消的回调函数
  ElMessageBox.confirm('确定删除吗','删除用户',{
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(()=>{
    ElMessage.success('删除成功')
  }).catch(()=>{
    ElMessage.error('删除失败')
  })

//编写退出按钮 配合路由进行跳转

image.png

User.js里面的方法:
get请求用查询字符串,传入对象的时候用{}包裹。 @RequestParam
post请求携带数据,直接传入对象即可 后端用@RequestBody 对象 携带的是表单数据
还有请求是模板字符串后端用的是@pathvairable动态提取。

import request from '@/util/request.js'
//查询所有用户
export const getAllUsers = (formData) => {
  var params = new URLSearchParams();
  for (let key in formData) {
    params.append(key, formData[key])
  }
  //这边漏掉了一个大括号
  return request.get('/user/queryByPage',
                     {params})
}
//添加用户 post请求携带数据 直接添加到data属性上面去
export const addUser = (formData) => {

  return request.post('/user/add', formData)
}
//更新用户  根据id和status
export const updateStatus = (id, status) => {
  return request.put(`/user/modifyStatus/${id}/${status}`);
}
//根据用户id得到用户 模板字符串
export const getUserById = (id) => {
  return request.get(`/user/query/${id}`)
}
//更新用户
export const UpdateUser = (formData) => {
  return request.put('/user/modify', formData)
}
//删除用户
export const deleteUser = (id) => {
  return request.delete(`/user/remove/${id}`)
}

Pagination分页样式

image.png

<el-pagination 
  v-model:current-page="userList.pageNum" 
  v-model:page-size="userList.pageSize"
  :page-sizes="[10, 20 ,30, 50]" //有哪些选项
  
  layout="jumper, total, sizes, prev, pager, next"
  
  background 
  :total="total"
  @size-change="onSizeChange"  //监听size改变
  @current-change="onCurrentChange"   //监听当前页改变  这两个都要重新请给后端
  style="margin-top: 20px; justify-content: flex-end"/>

这个代码片段是一个使用 Vue.js 和 Element UI 框架的分页组件。下面是对这个代码的分析:
. el-pagination 组件
<el-pagination> 是 Element UI 中的分页组件,用于分页显示数据列表。分页组件提供了许多属性和事件来控制分页行为和样式。
2. 属性和绑定

  • v-model:current-page="userList.pageNum":

    • 双向绑定 current-page 属性和 userList.pageNumcurrent-page 表示当前页码,userList.pageNum 是一个变量,存储当前页码的值。
  • v-model:page-size="userList.pageSize":

    • 双向绑定 page-size 属性和 userList.pageSizepage-size 表示每页显示的条目数,userList.pageSize 是一个变量,存储每页显示的条目数。
  • :page-sizes="[10, 20 ,30, 50]":

    • 绑定 page-sizes 属性,设置每页条目数的选项,这里提供了 10、20、30 和 50 条每页的选项。
  • layout="jumper, total, sizes, prev, pager, next":

    • 设置分页组件的布局,包括跳转器、总条目数、条数选择器、上一页按钮、页码按钮和下一页按钮。
  • background:

    • 添加背景样式。
  • :total="total":

    • 绑定 total 属性,总条目数。total 是一个变量,表示数据总条目数。
  • @size-change="onSizeChange":

    • 监听 size-change 事件,当每页条目数改变时触发 **onSizeChange** 方法。
  • @current-change="onCurrentChange":

    • 监听 current-change 事件,当当前页码改变时触发 **onCurrentChange** 方法。

    这个两个函数会自动有一个参数,我们需要传入这个参数。
    3. 样式

  • style="margin-top: 20px; justify-content: flex-end":

    • 设置组件的内联样式,添加顶部外边距为 20px,并将内容对齐方式设置为 flex-end,即右对齐。

表单校验

定义表单检验的规则.
  required:true 表示这个字段是必须的  trigger 校验触发规则  min max 表单的最大长度
const registerDataRules = ref({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 5, max: 16, message: '用户名的长度必须为5~16位', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 5, max: 16, message: '密码长度必须为5~16位', trigger: 'blur'}
  ],
  phone: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 5, max: 16, message: '密码长度必须为5~16位', trigger: 'blur'}
  ]
})
给需要校验的表单绑定规则 一定要是form表单
:rules="registerDataRules",绑定校验的规则。

给每一个form-item 绑定prop属性,prop属性对应校验里面的对象数组名称

image.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2085766.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DBpedia——利用维基百科信源构造语义知识库

1. 简介 DBpedia 从维基百科(Wikipedia)的词条里撷取出结构化的信息&#xff0c;以强化维基百科的搜寻功能&#xff0c;同时还提供复杂信息的检索功能&#xff0c;并将其他资料集连结至维基百科。通过这样的语义化技术的介入&#xff0c;让维基百科的庞杂资讯有了许多创新而有趣…

iview checkbox单独使用时 如何去掉显示的true和false以及不显示文字

如图所有 当在表格显示中想单独使用checkbox的时候&#xff0c;只想显示勾选 不显示文字这样写&#xff0c;分别用2个参数true/false来显示勾选和不勾选&#xff0c;再在外层用参数控制就好啦&#xff0c;是不是很简单呢&#xff01;

各行各业的都有的文档推荐

如果你在寻找一个丰富多样、几乎能满足任何阅读需求的电子书下载的地方&#xff0c;不妨考虑“literalink.top”网站。它不仅涵盖了广泛的书籍种类&#xff0c;从经典文学到最新畅销书应有尽有&#xff0c;还提供了多本不同版本和译本的选择&#xff0c;超越了许多其他网站的资…

GaussDB 24.1.30 分布式3节点命令行方式部署

目录 GaussDB介绍 服务器环境 安装前准备 配置会话不中断 操作系统配置 关闭防火墙并禁止开机启动 设置时区和时间 检查时区和时间 java版本 expect root密码一致 root用户ssh连通性 上传软件包和安装脚本 安装脚本配置 修改 install_cluster.json 配置文件 安装…

2024最新最全面的JMeter 做接口加密测试

JMeter 怎么做接口的加密&#xff1f; JMeter如果需要做加密测试&#xff0c;是需要加密类型对应的jar包的。本文以MD5,加密作为教程。 1、在Test Plan 引用jar包&#xff1b; 2、添加BeanShell Sampler取样器&#xff0c;并输入调用代码 import md5.mymd5;//调用jar包 String…

使用kafka完成数据的实时同步,同步到es中。(使用kafka实现自动上下架 upper、lower)

文章目录 1、发送消息 KafkaService2、生产者 service-album -> AlbumInfoServiceImpl2.1、新增 saveAlbumInfo()2.2、更新 updateAlbumInfo()2.3、删除 removeAlbumInfo() 3、消费者 service-search - > AlbumListener.java 上架&#xff1a;新增专辑到 es下架&#xff…

信息学奥赛初赛天天练-78-NOIP2015普及组-基础题3-中断、计算机病毒、文件传输协议FTP、线性表、链式存储、栈

NOIP 2015 普及组 基础题3 8 所谓的“中断”是指( ) A 操作系统随意停止一个程序的运行 B 当出现需要时&#xff0c;CPU 暂时停止当前程序的执行转而执行处理新情况的过程 C 因停机而停止一个程序的运行 D 电脑死机 9 计算机病毒是( ) A 通过计算机传播的危害人体健康的一种病…

有什么还原空白试卷的免费软件?2024快速进行空白还原的软件

有什么还原空白试卷的免费软件&#xff1f;2024快速进行空白还原的软件 还原空白试卷通常是指将已经填写的试卷还原为未填写的空白版本&#xff0c;以便重复使用或进行其他用途。以下是五款可以帮助你快速还原空白试卷的免费软件&#xff0c;这些工具提供了不同的功能&#xf…

补录.day43动态规划

300.最长递增子序列 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序…

【RNN】循环神经网络RNN学习笔记

时间序列任务场景&#xff1a; 语音识别生成一段音乐情感分析DNA序列分析机器翻译 如何理解时间序列&#xff1a;特点&#xff1a;前后关联强&#xff0c;前因后果&#xff0c;后面产生的结果依赖于之前的结果 标准神经网络建模的弊端&#xff1a; 输入和输出在不同例子中可…

MosaicML-面向生成式AI的机器学习平台

前段时间&#xff0c;大数据巨头 Databricks 宣布已签署最终协议&#xff0c;将以13亿美元的价格&#xff0c;收购位于旧金山的人工智能初创公司MosaicML 。这篇文章来自 MosaicML官方的技术博客&#xff0c;是对 MosaicML 大模型训练平台的一个简单介绍。 AIGC领域最大收购&am…

三防平板:定制化服务的趋势——以智慧医疗为例

随着科技的飞速发展&#xff0c;三防平板产品凭借其坚固耐用、适应复杂环境的特性&#xff0c;在众多行业领域中崭露头角。而在AI迅速增长的今天&#xff0c;AI智慧医疗成为了一个备受关注的热点&#xff0c;它不仅推动了医疗行业的数字化转型&#xff0c;也为三防平板产品的定…

OS向量测试方法-PPMU

1.OS向量测试方法 详细步骤&#xff1a; 检查工作&#xff1a; ①检查每根pin连接到指定的PPMU资源是否正确 ②继电器资源是否一一对应 代码编写步骤: 1、 ①设计者设计的测试电路继电器重置初始化 ②close应该闭合的继电器 2、 ①DPS pin电压置0V&#xff0c;同时考虑电流量…

1500万“黑悟空”,打醒一线大厂了吗?

《黑神话&#xff1a;悟空》“霸占”热搜以来&#xff0c;几乎每天都在创造新纪录。 近日&#xff0c;有机构称全平台已售1500万份&#xff0c;仅以268标准版计算&#xff0c;已然拿下40亿元人民币收入&#xff0c;这下10万天兵天将&#xff0c;每人要打150只猴子了。 发售之…

私有云仓库Harbor,docker-compose容器编排

一、私有云仓库 1.pip工具 是python的包管理工具&#xff0c;和yum对rehat的关系是一样的 pip install --upgrade pip 升级版本&#xff0c;会报错&#xff0c;需要指定源 pip install --upgrade pip20.3 -i https://mirrors.aliyun.com/pypi/simple pip …

本地部署一个WordPress博客结合内网穿透实现异地远程访问本地站点

文章目录 前言1. 安装WordPress2. 创建WordPress数据库3. 安装相对URL插件4. 安装内网穿透发布网站4.1 命令行方式&#xff1a;4.2. 配置wordpress公网地址 5. 配置WordPress固定公网地址 前言 本文主要介绍如何在Linux Ubuntu系统上使用WordPress搭建一个本地网站&#xff0c…

React学习day04-useEffect、自定义Hook函数

11、useEffect&#xff08;一个React Hook函数&#xff09; &#xff08;1&#xff09;作用&#xff1a;用于在React组件中创建不是由事件引起而是由渲染本身引起的操作&#xff0c;比如发送AJAX请求&#xff0c;更改DOM等&#xff08;即&#xff1a;视图渲染完后会触发一些事…

网络游戏服务器如何有效防护DDoS与CC攻击

随着网络游戏行业的蓬勃发展&#xff0c;其背后的服务器架构日益复杂&#xff0c;同时也面临着前所未有的网络安全威胁。其中&#xff0c;分布式拒绝服务&#xff08;DDoS&#xff09;和CC&#xff08;Challenge Collapsar&#xff09;攻击尤为突出&#xff0c;它们通过大量伪造…

90.游戏安全项目-项目搭建与解析

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a;易道云信息技术研究院 上一个内容&#xff1a;89.游戏安全项目-htdSdk安装 79.游戏分析工具闪屏问题优化与数据被修改高亮 这里面有注…

权力迷宫:皇权、律法与人性的深度博弈

权力迷宫&#xff1a;皇权、律法与人性的深度博弈 - 孔乙己大叔在人类社会的复杂织锦中&#xff0c;权力与律法的关系往往呈现出一种微妙而深刻的悖论。律法&#xff0c;这一社会秩序的基石&#xff0c;常被视作维护公正、约束行为的利器&#xff0c;然而&#xff0c;在金字塔的…