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

Vue2页面转化为Vue3

vue2+element-ui转化为Vue3+element plus
后台管理系统:增删查改
vue2页面:

<template><div class="app-container"><div><el-form:model="queryParams"ref="queryForm"size="small":inline="true"class="tabel-form"label-width="80px"><el-form-item label="影片分类"><el-inputv-model="queryParams.categoryName"placeholder="请输入影片分类"clearablestyle="width: 180px;margin-right:20px;"@keyup.enter.native="handleQuery"/></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜 索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重 置</el-button></el-form-item></el-form><el-buttonsize="mini"type="success"plainicon="el-icon-plus"@click="addFilmType"style="margin-bottom:10px">新增</el-button></div><el-table v-loading="loading" :data="dataList"><el-table-columnlabel="序号"align="center"type="index"width="140":show-overflow-tooltip="true"/><el-table-columnlabel="分类名称"align="center"prop="categoryName"width="140":show-overflow-tooltip="true"/><el-table-columnlabel="首页最多显示个数"align="center"prop="showQuantity"width="140":show-overflow-tooltip="true"/><el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200"><template slot-scope="scope"><div><el-buttonsize="mini"type="text"icon="el-icon-edit"@click="editFilmTypeName(scope.row)">编辑</el-button><el-buttonsize="mini"type="text"icon="el-icon-delete"@click="deleteFilmTypeName(scope.row)">删除</el-button></div></template></el-table-column></el-table><paginationv-show="total>0":total="total":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/><!-- 新增/编辑影片类型 --><el-dialog :title="title" :visible.sync="open" width="500px" append-to-body @close="cancel"><el-form ref="form" :model="form" :rules="rules"><el-form-item label="分类名称" prop="categoryName"><el-input v-model="form.categoryName" placeholder="请输入分类名称"></el-input></el-form-item><el-form-item label="首页最多显示个数" prop="showQuantity"><el-input v-model="form.showQuantity" type="number" :min="0" placeholder="请输入个数"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm2">确定</el-button><el-button @click="cancel">取消</el-button></div></el-dialog></div>
</template><script>
import {sysVideoCategoryGetPage,sysVideoCategoryEdit,sysVideoCategoryDelete
} from '@/api/filmManagement/filmList'
import { convertTimestamp } from "@/utils/yun"export default {name: 'Task',dicts: ['audit_type'],data () {return {// 遮罩层loading: false,// 总条数total: 0,// 店铺带货任务表格数据dataList: [],// 弹出层标题title: '',// 是否显示弹出层open: false,// 查询参数queryParams: {categoryName: "",pageNum: 1,pageSize: 10},rules: {categoryName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],showQuantity: [{ required: true, message: '个数不能为空', trigger: 'blur' }],},form: {categoryName: null,showQuantity: null},}},created () {this.getList()},methods: {convertTimestamp,/** 查询直播间用户等级 */getList () {this.loading = truesysVideoCategoryGetPage(this.queryParams).then((res) => {this.dataList = res.data.recordsthis.total = res.data.totalthis.loading = false}).catch(err => {this.loading = false})},/** 搜索按钮操作 */handleQuery () {this.queryParams.pageNum = 1this.getList()},/** 重置按钮操作 */resetQuery () {this.queryParams = {categoryName: null,pageNum: 1,pageSize: 10}this.handleQuery()},// 新增addFilmType () {this.open = truethis.title = '新增影片类型'},// 编辑editFilmTypeName (row) {this.form = { ...row }console.log(this.form)this.open = truethis.title = '编辑影片类型'},deleteFilmType (row) {sysVideoCategoryDelete(row.id).then((res) => {this.dataList = res.data.recordsthis.total = res.data.totalthis.loading = false}).catch(err => {this.loading = false})},// 删除deleteFilmTypeName (row) {this.$modal.confirm('是否确认删除该影片分类?').then(function () {return sysVideoCategoryDelete([row.id])}).then(() => {this.getList()this.$modal.msgSuccess('删除成功')}).catch(() => {})},submitForm2 () {this.$refs['form'].validate(valid => {if (valid) {sysVideoCategoryEdit(this.form).then((res) => {this.open = falsethis.getList()}).catch(err => {this.open = false})}})},cancel () {this.open = falsethis.form = {categoryName: null,showQuantity: null}},}
}
</script>
<style lang="scss" scoped>
.details-row {line-height: 34px;
}
.product-item {padding-right: 10px;
}
</style>

vue3页面:

<template><div class="app-container"><div><el-form:model="queryParams"ref="queryForm":inline="true"class="tabel-form"label-width="80px"><el-form-item label="影片分类"><el-inputv-model="queryParams.categoryName"placeholder="请输入影片分类"clearablestyle="width: 180px;margin-right:20px;"@keyup.enter.native="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-button type="success" icon="Plus" @click="addFilmType" plain>新 增</el-button></el-form-item></el-form></div><el-table v-loading="loading" :data="dataList" border><el-table-columnlabel="序号"align="center"type="index"width="240":show-overflow-tooltip="true"/><el-table-columnlabel="分类名称"align="center"prop="categoryName"width="240":show-overflow-tooltip="true"/><el-table-columnlabel="首页最多显示个数"align="center"prop="showQuantity"width="240":show-overflow-tooltip="true"/><el-table-column label="操作" align="left"><template #default="scope"><div><el-buttonsize="default"linktype="primary"icon="el-icon-edit"@click="editFilmTypeName(scope.row)">编辑</el-button><el-buttonsize="default"linktype="primary"icon="el-icon-delete"@click="deleteFilmTypeName(scope.row)">删除</el-button></div></template></el-table-column></el-table><paginationv-show="total > 0":total="total"v-model:page="queryParams.pageNum"v-model:limit="queryParams.pageSize"@pagination="getList"/><!-- 新增/编辑影片类型 --><el-dialog :title="title" v-model="open" width="700px" append-to-body @close="cancel"><el-form :model="form" :rules="rules" label-width="140px" ref="formRef"><el-form-item label="分类名称" prop="categoryName"><el-input v-model="form.categoryName" placeholder="请输入分类名称"></el-input></el-form-item><el-form-item label="首页最多显示个数" prop="showQuantity"><el-input v-model="form.showQuantity" type="number" :min="0" placeholder="请输入个数"></el-input></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button type="primary" @click="submitForm2(formRef)">确定</el-button><el-button @click="cancel">取消</el-button></div></template></el-dialog></div>
</template><script setup>
import {sysVideoCategoryGetPage,sysVideoCategoryEdit,sysVideoCategoryDelete
} from '@/api/filmManagement/filmList'
import { ref, getCurrentInstance, reactive } from 'vue'
import {ElMessage,ElMessageBox
} from 'element-plus'
const { proxy } = getCurrentInstance()
const loading = ref(false)
const total = ref(0)
const dataList = ref([])
const open = ref(false)
const title = ref('')
const queryParams = reactive({categoryName: "",pageNum: 1,pageSize: 10
})const formRef = ref(null)
const rules = reactive({categoryName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],showQuantity: [{ required: true, message: '个数不能为空', trigger: 'blur' }],
})
const form = ref({categoryName: 12,showQuantity: 0
})function getList () {loading.value = trueconsole.log(queryParams)sysVideoCategoryGetPage(queryParams).then((res) => {console.log(res)dataList.value = res.recordstotal.value = Number(res.total)loading.value = false}).catch(err => {loading.value = false})
}function handleQuery () {queryParams.pageNum = 1getList()
}function resetQuery () {queryParams.categoryName = nullqueryParams.pageNum = 1queryParams.pageSize = 10handleQuery()
}function addFilmType () {form.value = {categoryName: null,showQuantity: null}open.value = truetitle.value = '新增影片类型'
}function editFilmTypeName (row) {form.value = { ...row }open.value = truetitle.value = '编辑影片类型'
}function deleteFilmType (row) {sysVideoCategoryDelete(row.id).then((res) => {dataList.value = res.data.recordstotal.value = res.data.totalloading.value = false}).catch(err => {loading.value = false})
}function deleteFilmTypeName (row) {ElMessageBox.confirm('是否确认删除' + ' "' + row.categoryName + '" ' + '影片分类?').then(function () {return sysVideoCategoryDelete([row.id])}).then(() => {getList()ElMessage({type: 'success',message: '删除成功',})}).catch(() => {ElMessage({type: 'info',message: '删除取消',})})
}function submitForm2 () {if (!formRef.value) returnformRef.value.validate(valid => {if (valid) {sysVideoCategoryEdit(form.value).then((res) => {open.value = falseif (title.value = '新增影片类型') {ElMessage({type: 'success',message: '新增成功',})} else {ElMessage({type: 'success',message: '修改成功',})}getList()}).catch(err => {open.value = false})}})
}function cancel () {open.value = falseform.value = {categoryName: null,showQuantity: null}
}
getList()
</script>

html部分大体没有任何改变,js方面
1.script标签里面添加setup 语法糖
2.vue2 的data,都需要在vue3里面声明,
const loading = ref(false)
使用的时候:loading.value
3.vue2里面的方法,必须声明在methods,vue3里面,方法和变量都放在一个区域
vue3里面没有this,方法直接使用

element-ui和element plus大体相同,但是有些属性的使用发生了变化
1.按钮的图标
在这里插入图片描述

2.表格的自定义列模板
在这里插入图片描述

3.模态框的现实与隐藏
在这里插入图片描述

4.分页的当前页数和每页默认的条目个数
在这里插入图片描述后面遇到变化再补充

相关文章:

Vue2页面转化为Vue3

vue2element-ui转化为Vue3element plus 后台管理系统&#xff1a;增删查改 vue2页面&#xff1a; <template><div class"app-container"><div><el-form:model"queryParams"ref"queryForm"size"small":inline&qu…...

【课程作业】提取图中苹果的面积、周长和最小外接矩形的python、matlab和c++代码

提取图中苹果的面积、周长和最小外接矩形 在图像处理中&#xff0c;提取对象的关键属性是常见的任务之一。本文将演示如何使用三种流行的编程语言——Python、Matlab和C&#xff0c;利用相应的图像处理库&#xff08;OpenCV或Matlab内置函数&#xff09;来提取图像中苹果的面积…...

解决easyExcel模板填充时转义字符\{xxx\}失效

正常我们在使用easyExcel进行模板填充时&#xff0c;定义的变量会填充好对应的实际数据&#xff0c;未定义的变量会被清空&#xff0c;但是如果这个未定义的变量其实是模板的一部分&#xff0c;那么清空了就出错了。 在这张图里&#xff0c;上面的是模板填充后导出的文件&…...

在项目中使用CancelToken选择性取消Axios请求

Axios 提供了 CancelToken 类来创建取消标记。取消标记实际上是一个包含 token 标记和 cancel 方法的对象。 1、基本使用方法 const CancelToken axios.CancelToken; const source CancelToken.source();axios.get(/user/12345, {cancelToken: source.token }).catch(functi…...

[c++] 记录一次引用使用不当导致的 bug

在工作中看到了如下代码&#xff0c;代码基于 std::thread 封装了一个 Thread 类。Thread 封装了业务开发中常用的接口&#xff0c;比如设置调度策略&#xff0c;设置优先级&#xff0c;设置线程名。如下代码删去了不必要的代码&#xff0c;只保留能说明问题的代码。从代码实现…...

能不能节约百分之九十的算力来训练模型

Sora是由OpenAI开发的视频生成模型&#xff0c;它采用了多种先进的技术和架构&#xff0c;能够根据文本描述生成长达一分钟的高清视频。虽然OpenAI并未公开Sora的详细模型架构和实现细节&#xff0c;但我们可以根据公开的信息和参考论文来了解其技术架构。 Sora的核心技术架构主…...

LeetCode206: 反转链表.

题目描述 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 解题方法 假设链表为 1→2→3→∅&#xff0c;我们想要把它改成∅←1←2←3。在遍历链表时&#xff0c;将当前节点的 next指针改为指向前一个节点。由于节点没有引用其前一…...

高级统计方法 第1次作业

概念 1. 请解释什么是P值&#xff0c;怎么计算p值&#xff0c;p值结果怎么理解&#xff0c;p值有哪些应用......&#xff1f; &#xff08;a&#xff09;什么是P值 P值是一种用来判定假设检验结果的一个参数&#xff0c;它描述了在原假设为真的情况下&#xff0c;比所得到的…...

spinalhdl,vivado,fpga

https://spinalhdl.github.io/SpinalDoc-RTD/master spinal hdl sudo apt install openjdk-17-jdk scala curl echo “deb https://repo.scala-sbt.org/scalasbt/debian all main” | sudo tee /etc/apt/sources.list.d/sbt.list echo “deb https://repo.scala-sbt.org/scal…...

Tomcat线程池原理(下篇:工作原理)

文章目录 前言正文一、执行线程的基本流程1.1 JUC中的线程池执行线程1.2 Tomcat 中线程池执行线程 二、被改造的阻塞队列2.1 TaskQueue的 offer(...)2.2 TaskQueue的 force(...) 三、总结 前言 Tomcat 线程池&#xff0c;是依据 JUC 中的线程池 ThreadPoolExecutor 重新自定义…...

【服务器数据恢复】通过reed-solomon算法恢复raid6数据的案例

服务器数据恢复环境&#xff1a; 一台网站服务器中有一组由6块磁盘组建的RAID6磁盘阵列&#xff0c;操作系统层面运行MySQL数据库和存放一些其他类型文件。 服务器故障&#xff1a; 该服务器在工作过程中&#xff0c;raid6磁盘阵列中有两块磁盘先后离线&#xff0c;不知道是管理…...

LeetCode 2583.二叉树中的第 K 大层和:层序遍历 + 排序

【LetMeFly】2583.二叉树中的第 K 大层和&#xff1a;层序遍历 排序 力扣题目链接&#xff1a;https://leetcode.cn/problems/kth-largest-sum-in-a-binary-tree/ 给你一棵二叉树的根节点 root 和一个正整数 k 。 树中的 层和 是指 同一层 上节点值的总和。 返回树中第 k …...

element ui 安装 简易过程 已解决

我之所以将Element归类为Vue.js&#xff0c;其主要原因是Element是&#xff08;饿了么团队&#xff09;基于MVVM框架Vue开源出来的一套前端ui组件。我最爱的就是它的布局容器&#xff01;&#xff01;&#xff01; 下面进入正题&#xff1a; 1、Element的安装 首先你需要创建…...

websoket

WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。你可以向服务器发送消息并接收事件驱动的响应&#xff0c;而无需通过轮询服务器的方式以获得响应&#xff0c;比较典型的应用场景就是即时通讯&#xff08;聊天&#xff09;系统。 <!DOC…...

案例:微服务从Java/SpringBoot迁移到Golan

基于 Java 的微服务&#xff0c;特别是那些使用 Spring Boot 的微服务&#xff0c;长期以来因其强大的功能和广泛的社区支持而闻名。Spring Boot 的约定优于配置方法简化了微服务的部署和开发&#xff0c;提供了大量开箱即用的功能&#xff0c;例如自动配置、独立功能和简单的依…...

小波变换模拟

小波变换是一种信号处理技术&#xff0c;通过在时间-频率域中使用基于小波的函数进行信号分析。小波变换在处理非平稳信号和图像时特别有用&#xff0c;可以将信号分解为不同频率的成分。它在数据压缩、去噪、特征提取等领域有广泛应用。 MATLAB中提供了用于二维离散小波变换的…...

cv::Mat图像操作

图像读写 //include header #include <opencv2/imgcodecs.hpp>/** Currently, the following file formats are supported: Windows bitmaps - *.bmp, *.dib (always supported) JPEG files - *.jpeg, *.jpg, *.jpe (see the Note section) JPEG 2000 files - *.jp2 (s…...

【机器学习基础】一元线性回归(适合初学者的保姆级文章)

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;专栏&#xff1a;机器学习 欢迎订阅&#xff01;后面的内容会越来越有意思~ &#x1f4a1;往期推荐&#xff1a; 【机器学习基础】机器学习入门&#xff08;1&#xff09; 【机器学习基…...

2024年软件测试岗位-面试

第一部分&#xff1a; 1、自我介绍&#xff1a;简历写到的快速描述&#xff0c;学校、学历、工作经验等&#xff08;注意&#xff1a;不要过度优化简历&#xff0c;你不写别人可能会问&#xff0c;但你写了别人一定会问&#xff01;&#xff09; 第二部分&#xff1a; 1、功能测…...

【坑】Spring Boot整合MyBatis,一级缓存失效

一、Spring Boot整合MyBatis&#xff0c;一级缓存失效 1.1、概述 MyBatis一级缓存的作用域是同一个SqlSession&#xff0c;在同一个SqlSession中执行两次相同的查询&#xff0c;第一次执行完毕后&#xff0c;Mybatis会将查询到的数据缓存起来&#xff08;缓存到内存中&#xf…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...