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.分页的当前页数和每页默认的条目个数
在这里插入图片描述后面遇到变化再补充

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

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

相关文章

golang tun设备创建并监听

golang tun设备创建并监听 linux tun设备文件地址为/dev/net/tun.直接打开即可(关闭文件描述符创建的tun虚拟接口自动注销) fd,err:syscall.Open("/dev/net/tun",syscall.O_RDWR,0640)//关闭 syscall.Close(fd)初始化 配置ip地址启动虚拟网卡 ip addr add xxx.xx…

命令绕过 [安洵杯 2019]easy_web1

打开题目 打开题目在URL处看到cmd&#xff0c;本能的直接用系统命令ls 发现被过滤了。又注意到imgTXpVek5UTTFNbVUzTURabE5qYz0似乎是一串base64 拿去base64解码 再hex解码一次得到555.png 再将其hex加密 base64加密 反向推出index.php的payload:?imgTmprMlJUWTBOalUzT0RK…

基于Redis限流(固定窗口、滑动窗口、漏桶、令牌桶)(肝货!!!)

近期redis复习的比较多&#xff0c;在限流这方面发现好像之前理解的限流算法有问题&#xff0c;索性花了一天“带薪摸鱼”时间肝了一天&#xff0c;有问题可以评论区探讨。 废话不多说&#xff0c;正片开始 目录 Maven固定窗口滑动窗口算法漏桶算法令牌桶算法 Maven 有些不用的…

快速排序法的名字由来,排序步骤是什么,最坏情况下的排序次数如何计算得来的呢?

问题描述&#xff1a; 快速排序法的名字由来&#xff0c;排序步骤是什么&#xff0c;最坏情况下的排序次数如何计算得来的呢&#xff1f; 问题解答&#xff1a; 快速排序法的名字来源于其排序速度快的特点。它是由英国计算机科学家 Tony Hoare 于1960年提出的&#xff0c;最…

板块一 Servlet编程:第六节 HttpSession对象全解 来自【汤米尼克的JAVAEE全套教程专栏】

板块一 Servlet编程&#xff1a;第六节 HttpSession对象全解 一、什么是HttpSessionSession的本质 二、创建Seesion及常用方法三、Session域对象四、Session对象的销毁 在上一节中&#xff0c;我们学习了Servlet五大对象里的第三个Cookie对象&#xff0c;但Cookie是有大小限制和…

Linux操作体系结构与功能流程

文章目录 前言一、linux操作系统结构二、操作系统的工作方式三、操作系统内核中各级模块的相互关联四、Linux操作系统结构的独立性 前言 以内核代码 v0.11 和 v3.4.2 版本源码对 Linux 内核相关知识进行学习&#xff0c;由浅入深逐步掌握 Linux 内核。本文记录 Linux 操作系统…

了解您的数据库管理系统及其优化器

PostgreSQL 模式 物品具有唯一标识符、唯一图像标识符、名称和价格。 仓库具有唯一标识符、名称以及由街道、城市和国家定义的位置。 对于每个可用的物品&#xff0c;我们记录每个仓库中的库存数量。如果某个物品在仓库中不可用&#xff0c;则这对没有记录。数量总是等于或大于…

[Angular 基础] - 自定义指令,深入学习 directive

[Angular 基础] - 自定义指令&#xff0c;深入学习 directive 这篇笔记的前置笔记为 [Angular 基础] - 指令(directives)&#xff0c;对 Angular 的 directives 不是很了解的可以先过一下这篇笔记 后面也会拓展一下项目&#xff0c;所以感兴趣的也可以补一下文后对应的项目&a…

排序和查找算法

一、排序算法 1.快速排序 不稳定&#xff0c;时间复杂度最理想 O(nlogn) 最差时间O(n^2) package com.test;public class fasf{/*** 快速排序* param args*/public static void main(String[]args){//不用设置大小int [] num{3,6,5,4,7,2,9};fasf fnew fasf();f.quicksort(n…

ZS Associates致盛咨询是什么公司?排名怎么样?

随着商业化时代的加速演进&#xff0c;咨询公司在企业发展中的“智囊团”角色愈发突显。对于医药企业来说&#xff0c;一个优秀的咨询团队不仅可以帮助推动整体战略转型及内部改革&#xff0c;还对药品研发、营销起到优化促进作用。 那什么样的咨询企业可称之为优秀的咨询企业…

6.网络游戏逆向分析与漏洞攻防-游戏网络架构逆向分析-通过逆向分析确定游戏明文发送数据过程

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;测试需求与需求拆解 在开始之前要了解一个小知识&#xff0c;在逆向开始之前要很清楚知道要找的东西是什么&#xff0c;大概长什么样子&#xff0c;只有这样才能看到它第一眼发现它&#xff0c;现在我…

129 Linux 系统编程7 ,make 的编写和解析

前文中&#xff0c;我们有多少个.c文件&#xff0c;就需要build 出来多少个.o文件 假设我们的项目很大&#xff0c;怎么管理这些 .c文件呢&#xff1f; 这里就要学习一个make文件的编写了。 makefile 本质上是一个脚本语言 脚本语言实际上就是将一系列命令放在一起执行 mak…

Jetson Xavier NX 与笔记本网线连接 ,网络共享,ssh连接到vscode

Jetson Xavier NX 与笔记本网线连接 &#xff0c;网络共享&#xff0c;ssh连接到vscode Jetson Xavier NX桌面版需要连接显示屏、鼠标和键盘&#xff0c;操作起来并不方便&#xff0c;因此常常需要ssh远程连接到本地笔记本电脑&#xff0c;这里介绍一种连接方式&#xff0c;通过…

如何不患心肌梗塞

目录 一&#xff0c;个人面板 二&#xff0c;公共版图 三&#xff0c;卡牌 1&#xff0c;食物牌 2&#xff0c;药物牌 3&#xff0c;事件牌 四&#xff0c;回合操作 1&#xff0c;起始玩家 2&#xff0c;一轮操作 3&#xff0c;个人回合 4&#xff0c;轮末结算 5&a…

Vision Transfomer系列第二节---Tricks测试

目录 学习式和固定式位置编码测试dropout的作用测试block深度的作用测试embeding维度大小的作用测试多头的作用测试Overlap Patch的作用 学习式和固定式位置编码测试 主要测试无位置编码\可学习位置编码和固定式位置编码的训练效果: 其中固定式位置编码采用之前博客的正余弦位…

第十一天-Excel的操作

目录 1.xlrd-Excel的读模块 安装 使用 获取工作簿 读取工作簿的内容 xlsxwriter-Excel的写模块 安装 使用 生成图表 add_series参数 图表的样式 demo&#xff1a;生成图表 Excel的操作在python中有多个模块&#xff0c;为了能够快速使用&#xff0c;选择了相对简单…

【Docker】初学者 Docker 基础操作指南:从拉取镜像到运行、停止、删除容器

在现代软件开发和部署中&#xff0c;容器化技术已经成为一种常见的方式&#xff0c;它能够提供一种轻量级、可移植和可扩展的应用程序打包和部署解决方案。Docker 是目前最流行的容器化平台之一&#xff0c;它提供了一整套工具和技术&#xff0c;使得容器的创建、运行和管理变得…

想设计智能手环,我需要设计哪种电路?

随着电子技术的高速发展&#xff0c;可穿戴设备逐渐火爆&#xff0c;其中之一是智能手环&#xff0c;作为现代可穿戴技术的热门产品之一&#xff0c;它集成了多种功能&#xff0c;如健康检测、运动跟踪、通知提醒等&#xff0c;为了实现这些功能&#xff0c;需要用上哪些电路模…

模板注入 [WesternCTF2018]shrine1

打开题目 直接查看源代码 发现注册了一个名为FLAG的config&#xff0c;这里可能有flag&#xff0c; 存在flask-jinja2模板注入&#xff0c; 并且存在黑名单过滤 输入shrine/{{7*7}}验证成功 通过url_for()与globals()函数&#xff0c;绕过黑名单 /shrine/{{url_for.__globa…

Android 输入法框架简介

每种平台都有自己的输入法框架. GNU/Linux 桌面环境有多种输入法框架, 比如 ibus, fcitx 等. 但是 Android 操作系统只有一种, 是统一提供的输入法框架. 相关链接: 《ibus 源代码阅读 (1)》 https://blog.csdn.net/secext2022/article/details/136099328https://developer.and…