【第10章】Vue之Element Plus常用组件

文章目录

  • 前言
  • 一、表格
    • 1. 带斑马纹表格
    • 2. 展示
  • 二、分页
    • 1.国际化(中文)
    • 2.分页代码
    • 3. 展示
  • 三、表单
    • 1. 表单代码
    • 2. 展示
  • 四、卡片
    • 1. 卡片代码
    • 2. 展示
  • 总结


前言

通过上一章的快速入门,我们已经学习了按钮使用,接下来学习Element Plus的常用组件:

  • 表格
  • 分页
  • 表单
  • 卡片

一、表格

1. 带斑马纹表格

<template><el-table :data="tableData" stripe style="width: 100%"><el-table-column prop="name" label="姓名" width="180" /><el-table-column prop="address" label="地址" /><el-table-column prop="date" label="日期" width="180" /></el-table>
</template><script lang="ts" setup>
const tableData = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]
</script>

2. 展示

在这里插入图片描述

二、分页

上面已经展示了表格,当数据比较多的时候,就需要分页了。

1.国际化(中文)

代码如下(示例):

import ElementPlus from 'element-plus'
import ElementPlusLocaleZhCn from 'element-plus/dist/locale/zh-cn'const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 ,locale: ElementPlusLocaleZhCn})

2.分页代码

<el-paginationv-model:current-page="currentPage"v-model:page-size="pageSize":page-sizes="[10, 20, 50, 100]":small="small":disabled="disabled":background="background"layout="prev, pager, next,sizes,jumper,total":total="400"@size-change="handleSizeChange"@current-change="handleCurrentChange"/>
//分页数据
const currentPage = ref(1)
const pageSize=10
const small = ref(false)
const background = ref(false)
const disabled = ref(false)const handleSizeChange = (val: number) => {console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {console.log(`current page: ${val}`)
}

3. 展示

在这里插入图片描述

三、表单

这里展示查询表单的使用

1. 表单代码

<el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="姓名"><el-select v-model="formInline.user" placeholder="请选择" clearable><el-option label="Tom" value="0" /><el-option label="Jerry" value="1" /></el-select></el-form-item><el-form-item label="地址"><el-input v-model="formInline.address" placeholder="请输入" clearable /></el-form-item><el-form-item label="日期"><el-date-picker v-model="formInline.date" type="date" placeholder="请选择日期" clearable /></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button><el-button @click="onReset">重置</el-button></el-form-item></el-form>
import { ref, reactive } from 'vue'//搜索表单
const formInline = reactive({user: '',address: '',date: '',
})const onSubmit = () => {console.log('submit!')
}
const onReset = () => {console.log('reset!')
}

2. 展示

在这里插入图片描述

四、卡片

1. 卡片代码

<template><el-card style="max-width: 700px"  shadow="hover"><div class="demo-card"><span>用户信息</span><el-button  type="primary" @click="onSubmit">管理用户</el-button></div><div style="margin-top:10px;margin-bottom:10px"><hr></div><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="姓名"><el-select v-model="formInline.user" placeholder="请选择" clearable><el-option label="Tom" value="0" /><el-option label="Jerry" value="1" /></el-select></el-form-item><el-form-item label="地址"><el-input v-model="formInline.address" placeholder="请输入" clearable /></el-form-item><el-form-item label="日期"><el-date-picker v-model="formInline.date" type="date" placeholder="请选择日期" clearable /></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button><el-button @click="onReset">重置</el-button></el-form-item></el-form><el-table :data="tableData" stripe style="width: 100%"><el-table-column prop="name" label="姓名" width="180" /><el-table-column prop="address" label="地址" /><el-table-column prop="date" label="日期" width="180" /></el-table><el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]":small="small" :disabled="disabled" :background="background" layout="prev, pager, next,sizes,jumper,total":total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" /></el-card>
</template><script lang="ts" setup>
import { ref, reactive } from 'vue'//表格数据
const tableData = [{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},
]
//分页数据
const currentPage = ref(1)
const pageSize = 10
const small = ref(false)
const background = ref(false)
const disabled = ref(false)const handleSizeChange = (val: number) => {console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {console.log(`current page: ${val}`)
}
//搜索表单
const formInline = reactive({user: '',address: '',date: '',
})const onSubmit = () => {console.log('submit!')
}
const onReset = () => {console.log('reset!')
}
</script>
<style scoped>
.demo-form-inline .el-input {--el-input-width: 220px;
}.demo-form-inline .el-select {--el-select-width: 220px;
}
.demo-card{display: flex;justify-content: space-between;
}
</style>

2. 展示

在这里插入图片描述


总结

回到顶部

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

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

相关文章

SQL 快速参考

SQL 快速参考 SQL&#xff08;Structured Query Language&#xff09;是一种用于管理关系数据库管理系统&#xff08;RDBMS&#xff09;的标准编程语言。它用于执行各种操作&#xff0c;如查询、更新、插入和删除数据库中的数据。本快速参考将提供SQL的基本语法和常用命令&…

意向锁通俗解释

意向锁概念 意向锁&#xff08;Intention Lock&#xff09;是一种数据库并发控制机制&#xff0c;用于协调和管理多个事务对数据库对象&#xff08;如表、行等&#xff09;的并发访问。它通过在数据库对象上加锁来避免事务间的冲突&#xff0c;确保数据的一致性和完整性。 意…

JavaScript之对象

对象 什么是对象 一种数据类型&#xff0c;可以理解为一种无序的数据集合&#xff0c;数组是有序的数据集合 用来描述一个事物&#xff1a;静态特征、动态特征 对象使用 声明语法&#xff1a; //第一种 let 对象名 {属性名&#xff1a;属性值, //多个属性由逗号隔开方法…

826. 安排工作以达到最大收益

826. 安排工作以达到最大收益 题目链接&#xff1a;826. 安排工作以达到最大收益 代码如下&#xff1a; class Solution { public:int maxProfitAssignment(vector<int>& difficulty, vector<int>& profit, vector<int>& worker) {vector<…

统计信号处理基础 习题解答10-12

题目&#xff1a; 如果&#xff0c;其中&#xff1a; 对某个&#xff0c;令。证明当时使最大。另外&#xff0c;证明。它们为什么是相同的&#xff1f;如果&#xff0c;基于的的MMSE估计量是什么&#xff1f; 解答&#xff1a; 根据多维高斯分布的定义&#xff0c;可以得到&am…

2024年最新版-Kubeadm快速部署Kubernetes集群(K8S)

Kubernetes集群部署 文章目录 Kubernetes集群部署资源列表基础环境一、环境准备&#xff08;三台主机都要执行&#xff09;1.1、绑定hosts1.2、安装常用软件1.3、关闭交换分区1.4、时间同步 二、Docker环境部署&#xff08;三台主机都要执行&#xff09;2.1、安装依赖包2.2、添…

全志d1 licheerv编译

opensbi sudo apt install gcc-riscv64-linux-gnugit clone https://github.com/riscv-software-src/opensbi.git cd opensbi make CROSS_COMPILEriscv64-linux-gnu- PLATFORMgeneric FW_PICy -j$(nproc)uboot 主线未支持 sudo apt install bison swig flex libpython3.11-d…

有监督学习——线性回归

1. 线性模型 有监督学习是通过已知的样本产生预测模型的学习方法&#xff0c;任何有监督学习模型都可被想象成一个函数&#xff1a; 其中&#xff0c;\(x_1,x_2,x_3…x_n\)是模型的n维的特征值&#xff0c;\(y\)是要预测的目标值/分类&#xff0c;当\(y\)是可枚举的类型时&…

11.docker镜像分层dockerfile优化

docker镜像的分层&#xff08;kvm 链接克隆&#xff0c;写时复制的特性&#xff09; 镜像分层的好处&#xff1a;复用,节省磁盘空间&#xff0c;相同的内容只需加载一份到内存。 修改dockerfile之后&#xff0c;再次构建速度快 分层&#xff1a;就是在原有的基础镜像上新增了服…

探索机器学习:深入理解Sklearn基础

目录 1. 安装与导入Sklearn 2. 数据集的加载与探索 3. 数据预处理 3.1 标准化与归一化 3.2 缺失值处理 4. 数据集划分 5. 选择与训练模型 6. 模型评估 7. 模型优化 7.1 网格搜索 7.2 随机搜索 8. 模型保存与加载 9. 示例项目:鸢尾花分类 10. 更多高级功能 10.1…

2024 年最新 Python 基于百度智能云实现短语音识别、语音合成详细教程

百度智能云语音识别 采用国际领先的流式端到端语音语言一体化建模算法&#xff0c;将语音快速准确识别为文字&#xff0c;支持手机应用语音交互、语音内容分析、机器人对话等场景。百度短语音识别可以将 60 秒以下的音频识别为文字。适用于语音对话、语音控制、语音输入等场景…

CSS实现经典打字小游戏《生死时速》

&#x1f33b; 前言 CSS 中有这样一个模块&#xff1a;Motion Path 运动模块&#xff0c;它可以使元素按照自定义的路径进行移动。本文将为你讲解这个模块属性的使用&#xff0c;并且利用它实现我小时候电脑课经常玩的一个打字游戏&#xff1a;金山打字的《生死时速》。 &…

C++中的拷贝构造函数和赋值运算符重载的定义

在C中&#xff0c;拷贝构造函数&#xff08;Copy Constructor&#xff09;和赋值运算符重载&#xff08;Assignment Operator Overloading&#xff09;是两种特殊的成员函数&#xff0c;它们都与对象的复制操作有关&#xff0c;但在上下文和用途上有所不同。 拷贝构造函数&…

ERP、CRM、MRP、PLM、APS、MES、WMS、SRM系统介绍

一、ERP系统 ERP系统&#xff0c;即企业资源计划&#xff08;Enterprise Resource Planning&#xff09;系统&#xff0c;是一种集成管理软件系统&#xff0c;旨在帮助企业实现资源的有效管理和优化。以下是对ERP系统的详细介绍&#xff1a; 1、定义与功能 ERP是企业资源计划…

小白跟做江科大32单片机之定时器

原理部分 1. 计数器每遇到一个上升沿就会计数值1,。 72MHZ72000000 72000000/65536/655360.0167638063430786132812559.652323555555554 (s) 2. 3. 计数时钟每来一个上升沿&#xff0c;计数值1&#xff0c;自动运行。如果计数值与存储在自动重装载寄存器中的值相等&#…

2024年心理学研究、现代化教育与社会发展国际学术会议(PRMESD 2024)

2024年心理学研究、现代化教育与社会发展国际学术会议(PRMESD 2024) 2024 International Conference on Psychological Research, Modern Education and Social Development 会议地点&#xff1a;南京&#xff0c;中国 网址&#xff1a;www.prmesd.com 邮箱: prmesdsub-con…

Python 学习 第二册 第10章 标准库的模块

-----用教授的方法学习 目录 10.1 模块 10.1.1模块就是程序 10.1.2 模块是用来下定义的 10.1.3 让模块可用 10.1.4 包 10.2 探索模块 10.2.1 模块包含什么 10.2.2 使用 help 获取帮助 10.2.3 使用源代码 10.3 标准库&#xff1a;一些深受欢迎的模块 10.3.1 sys 10…

【TensorFlow深度学习】使用TensorBoard可视化模型训练过程与性能指标

使用TensorBoard可视化模型训练过程与性能指标 使用TensorBoard可视化模型训练过程与性能指标&#xff1a;深度洞察模型学习之路安装与环境准备编写模型训练代码并集成TensorBoard日志启动TensorBoard解读TensorBoard可视化结果结语 使用TensorBoard可视化模型训练过程与性能指…

.net core使用EPPlus设置Excel的页眉和页脚

废话不表&#xff0c;直接上干货代码&#xff1a; using (ExcelPackage packagenew ExcelPackage()) {//创建一个表ExcelWorksheet workSheet package.Workbook.Worksheets.Add("表一");//设置页眉左边显示内容workSheet.HeaderFooter.OddHeader.LeftAlignedText&qu…

c# webapi 禁用单个方法(Action)与整个控制器(Controller)

在C#中&#xff0c;如果你想要禁用Web API Controller下的所有方法&#xff0c;你可以通过在Controller上应用特定的Attribute来实现。这里有两种常见的方法来禁用所有Controller的方法&#xff1a; 使用[NonAction]属性&#xff1a;这个属性可以被应用到单个的Action方法上&am…