当前位置: 首页 > news >正文

vue3整合Element-Plus,极速上手。

条件分页查询:
    需求分析:
        form表单
        Button按钮
        Table表格
        Pagination分页
    页面布局:
        搜索表单:
            如果表单封装的数据较多,建议绑定到一个对象中。
            定义表单搜索接口:
                export interface SearchEmpModel {
  name: string, //姓名
  gender: string, //性别
  begin: string, //开始时间
  end: string, //结束时间
  date: string[] //时间范围
}

            定义表单搜索对象:
                //搜索表单对象
let searchEmp = ref<SearchEmpModel>({
    begin: '', 
    end: '', 
    date: [], 
    name: '',
    gender: ''
}) 

            watch监听:
                作用:
                    侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数。
                用法:
                    1,导入watch函数
                        import { ref, watch } from 'vue'
const a = ref<string>('')

                    2,执行watch函数,传入要监听的响应式数据(ref对象)和回调函数
                        watch(a, (newVal , oldVal) => { //侦听a的变化
  console.log(`a的值为: newVal: ${newVal}, oldVal: ${oldVal}`);
}) 

                侦听对象的单个属性:
                    import { ref, watch } from 'vue'
const user = ref({name:'', age:10})

                    watch( () => user.value.name , (newVal , oldVal) => {  //侦听user对象中name的变化
  console.log(`a的值为: newVal: ${newVal}, oldVal: ${oldVal}`);
})
                侦听对象的全部属性:(深度侦听)
                    import { ref, watch } from 'vue'
const user = ref({name:'', age:10})

                    watch(user, (newVal , oldVal) => {  //侦听user对象中的全部属性的变化
  console.log(`a的值为: newVal: ${newVal}, oldVal: ${oldVal}`);
}, {deep: true}) 

                        //监听searchEmp的date属性
watch(() => searchEmp.value.date, (newVal, oldVal) => {
  if(newVal) {
    searchEmp.value.begin = newVal[0]
    searchEmp.value.end = newVal[1]
  }else {
    searchEmp.value.begin = ''
    searchEmp.value.end = ''
  }
})

                第三个可选参数,常见两个选项:
                    deep(boolean):是否深度侦听,默认浅层侦听。

                    immediate(boolean):是否在侦听创建时立即触发回调函数。

        数据表格:
            <el-table>标签
                首列显示复选框,需要把<el-table-column> 标签的type属性改为 selection
                在操作的那一列<el-table-column>,需要使用插槽,在这一列中定义<temlpate>
             <el-pagination>标签
                1,绑定了三个属性:current-page(当前页码),current-size(每页显示的记录数),total(总共有多少条记录)
                2,绑定了两个方法:handleSizeChange(页面大小发生变化时触发),handleCurrentChange(当前页码发生变化时触发)
                3,动态绑定了:page-sizes属性,里面定义的是,下拉菜单每页显示的条数。
                4,layout属性,里面填写的是,分页条的各个功能,它们出现的位置或者,有多少个,就决定了,页面显示的效果。
    页面交互:
        查询:
            逻辑:点击查询按钮的时候,根据输入的条件进行参数分页查寻。
            参数:此案例包含:name,gender,begin,end,page,pageSize
            使用钩子函数,在页面加载完毕就要开始,调用查询的方法。
            查询到的数据要赋值给,我们定义的table要展示的数据表格数组。
            总记录数:要封装到分页参数对象里面的total属性中。
        清空:
            逻辑::点击清空时,清空搜索表单中表单项的内容,并再次查询最新数据。

        页码发生变化:
            handleCurrentChange,方法里面定义一个参数,表示当前的页码。
        每页显示的记录数发生变化:
            handleSizeChange,方法里面写一个参数,代表每页显示的记录数的变化。

新增员工:

修改员工:

删除员工:

登录认证:

打包部署(nginx):
 

相关文章:

vue3整合Element-Plus,极速上手。

条件分页查询&#xff1a; 需求分析&#xff1a; form表单 Button按钮 Table表格 Pagination分页 页面布局&#xff1a; 搜索表单&#xff1a; 如果表单封装的数据较多&#xff0c;建议绑定到一个对象中。 …...

学习Vue2.x

文章目录 一、使用Vue脚手架1.ref和props属性2.mixin混入3.组件化编码流程4.webStorage5.组件自定义事件6.全局事件总线7.消息订阅与发布 二、使用步骤1.引入库 一、使用Vue脚手架 1.ref和props属性 ref属性&#xff1a; &#xff08;1&#xff09;被用来给元素或子组件注册应…...

新手如何快速熟悉代码,写出东西(持续更新)

目录 第一章、最小编程任务的设想1.1&#xff09;程序员入门会遇到的问题1.2&#xff09;最小编程任务的设想1.3&#xff09;编程逻辑1.4&#xff09;具体需求 第二章、最小编程单元的练习2.1&#xff09;代码/需求方面2.1.1&#xff09;初级练习2.1.2&#xff09;中级练习2.1.…...

11-网络安全框架及模型-软件安全能力成熟度模型(SSCMM)

目录 软件安全能力成熟度模型 1 背景概述 2 主要内容 3 成熟度等级定义 4 关键过程和实践 5 评估方法 6 改进建议 7 持续改进 8 主要价值 9 应用场景 10 优势和局限性 备注 软件安全能力成熟度模型 1 背景概述 SSCMM模型是软件安全能力成熟度模型&#xff0c;它描…...

Linux操作系统基础知识点

Linux是一种计算机操作系统&#xff0c;其内核由林纳斯本纳第克特托瓦兹&#xff08;Linus Benedict Torvalds&#xff09;于1991年首次发布。Linux操作系统通常与GNU套件一起使用&#xff0c;因此也被称为GNU/Linux。它是一种类UNIX的操作系统&#xff0c;设计为多用户、多任务…...

python 通过opencv及face_recognition识别人脸

效果&#xff1a; 使用Python的cv2库和face_recognition库来进行人脸检测和比对的 0是代表一样 认为是同一人。 代码&#xff1a; pip install opencv-python pip install face_recognition# 导入cv2库&#xff0c;用于图像处理 import cv2 # 导入face_recognition库&#…...

Android开发中常见的Hook技术有哪些?

Hook技术介绍 Hook技术是一种在软件开发中常见的技术&#xff0c;它允许开发者在特定的事件发生时插入自定义的代码逻辑。常见的应用场景包括在函数调用前后执行特定的操作&#xff0c;或者在特定的事件发生时触发自定义的处理逻辑。 在Android开发中&#xff0c;Hook通常是通…...

【linux c多线程】线程的创建,线程信息的获取,获取线程返回值

线程创建 ​专栏内容&#xff1a; 参天引擎内核架构 本专栏一起来聊聊参天引擎内核架构&#xff0c;以及如何实现多机的数据库节点的多读多写&#xff0c;与传统主备&#xff0c;MPP的区别&#xff0c;技术难点的分析&#xff0c;数据元数据同步&#xff0c;多主节点的情况下对…...

MFC或QT中,自绘控件的目的和实现步骤

MFC自绘控件的步骤 自绘控件的目的是为了能够自定义控件的外观、行为和交互方式&#xff0c;以满足特定的需求&#xff0c;同时增强应用程序的用户体验。 实现步骤如下&#xff1a; 1、创建一个继承自MFC控件基类&#xff08;如CButton、CStatic等&#xff09;的自定义控件类…...

ceph集群搭建详细教程(ceph-deploy)

ceph-deploy比较适合生产环境&#xff0c;不是用cephadm搭建。相对麻烦一些&#xff0c;但是并不难&#xff0c;细节把握好就行&#xff0c;只是命令多一些而已。 实验环境 服务器主机public网段IP&#xff08;对外服务&#xff09;cluster网段IP&#xff08;集群通信&#x…...

机器视觉系统选型-避免畸变

在定位及高精度测量的系统中&#xff0c;镜头畸变的影响尤其重要 • 使用远心镜头 • 进行系统标定...

机器学习笔记 - 线性判别分析(LDA)的原理和应用

一、LDA简述 线性判别分析(LDA)是监督机器学习中用于解决多类分类问题的一种方法。LDA通过数据降维来分离具有多个特征的多个类。这项技术在数据科学中很重要,因为它有助于优化机器学习模型。 线性判别分析,也称为正态判别分析 (NDA) 或判别函数分析 (DFA),遵循生成模型框…...

基于5G智能网关的智慧塔吊监测方案

塔吊是建筑施工中必不可少的设施&#xff0c;由于塔吊工作重心高、起重载荷大、人工视距/视角受限等因素&#xff0c;也使得塔吊在工作过程中着较多的危险因素。对此&#xff0c;可以部署基于工业5G智能网关搭建智慧塔吊安全监测系统&#xff0c;实现对塔吊运行的全局精细监测感…...

CountDownLatch详解以及用法示例

一、什么是CountDownLatch CountDownLatch中count down是倒数的意思&#xff0c;latch则是门闩的含义。整体含义可以理解为倒数的门栓。 CountDownLatch的作用也是如此&#xff0c;在构造CountDownLatch(int count)&#xff1a;的时候需要传入一个整数count&#xff0c;在这个…...

【http】缓存协议

✨ 专栏介绍 在当今互联网时代&#xff0c;计算机网络已经成为了人们生活和工作中不可或缺的一部分。而要实现计算机之间的通信和数据传输&#xff0c;就需要依靠各种网络协议来进行规范和约束。无论是浏览网页、发送电子邮件还是进行在线交流&#xff0c;都离不开各种各样的网…...

vscode中使用GitHub Copilot Chat

文章目录 一、什么是Github Copilot Chat二、安装使用三、如何使用1. 聊天功能2. 内联功能 一、什么是Github Copilot Chat GitHub Copilot Chat 由 OpenAI 的 GPT-4 大型多模态模型提供支持&#xff0c;能带来更准确的代码建议、解释和指导。GitHub Copilot Chat 的内联功能可…...

lvgl 双物理显示器的驱动实现

目录 一、背景 1. 要实现的功能2. lvgl 版本 二、简单粗暴的方式 理论上可以这样实现缺陷&#xff1a; 三、lvgl 自身机制支持 3.1 实现思路3.2 初始化缓冲区和注册显示驱动 3.2.1 复制lv_port_disp → lv_port_disp_23.2.2 修改 lv_port_disp_2 文件3.2.3 在应用层调用显示器…...

论文阅读——X-Decoder

Generalized Decoding for Pixel, Image, and Language Towards a Generalized Multi-Modal Foundation Model 1、概述 X-Decoder没有为视觉和VL任务开发统一的接口&#xff0c;而是建立了一个通用的解码范式&#xff0c;该范式可以通过采用共同的&#xff08;例如语义&#…...

【Kubernetes】控制器Statefulset

Statefulset控制器 一、概念二、Statefulset资源清单文件编写技巧2.1、查看定义Statefulset资源需要的字段2.2、查看statefulset.spec字段如何定义2.3、查看statefulset的spec.template字段如何定义 三、Statefulset使用案例&#xff1a;部署web站点3.1、编写一个Statefulset资…...

智能优化算法应用:基于鱼鹰算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于鱼鹰算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于鱼鹰算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.鱼鹰算法4.实验参数设定5.算法结果6.参考文献7.MA…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

Monorepo架构: Nx Cloud 扩展能力与缓存加速

借助 Nx Cloud 实现项目协同与加速构建 1 &#xff09; 缓存工作原理分析 在了解了本地缓存和远程缓存之后&#xff0c;我们来探究缓存是如何工作的。以计算文件的哈希串为例&#xff0c;若后续运行任务时文件哈希串未变&#xff0c;系统会直接使用对应的输出和制品文件。 2 …...