Vue2页面转化为Vue3

news2024/11/18 17:38:58

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-input
            v-model="queryParams.categoryName"
            placeholder="请输入影片分类"
            clearable
            style="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-button
        size="mini"
        type="success"
        plain
        icon="el-icon-plus"
        @click="addFilmType"
        style="margin-bottom:10px"
      >新增</el-button>
    </div>
    <el-table v-loading="loading" :data="dataList">
      <el-table-column
        label="序号"
        align="center"
        type="index"
        width="140"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="分类名称"
        align="center"
        prop="categoryName"
        width="140"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="首页最多显示个数"
        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-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="editFilmTypeName(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="deleteFilmTypeName(scope.row)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-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 = true
      sysVideoCategoryGetPage(this.queryParams).then((res) => {
        this.dataList = res.data.records
        this.total = res.data.total
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.queryParams = {
        categoryName: null,
        pageNum: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    // 新增
    addFilmType () {
      this.open = true
      this.title = '新增影片类型'

    },
    // 编辑
    editFilmTypeName (row) {
      this.form = { ...row }
      console.log(this.form)
      this.open = true
      this.title = '编辑影片类型'

    },
    deleteFilmType (row) {
      sysVideoCategoryDelete(row.id).then((res) => {
        this.dataList = res.data.records
        this.total = res.data.total
        this.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 = false
            this.getList()
          }).catch(err => {
            this.open = false
          })
        }
      })
    },
    cancel () {
      this.open = false
      this.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-input
            v-model="queryParams.categoryName"
            placeholder="请输入影片分类"
            clearable
            style="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-column
        label="序号"
        align="center"
        type="index"
        width="240"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="分类名称"
        align="center"
        prop="categoryName"
        width="240"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="首页最多显示个数"
        align="center"
        prop="showQuantity"
        width="240"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="操作" align="left">
        <template #default="scope">
          <div>
            <el-button
              size="default"
              link
              type="primary"
              icon="el-icon-edit"
              @click="editFilmTypeName(scope.row)"
            >编辑</el-button>
            <el-button
              size="default"
              link
              type="primary"
              icon="el-icon-delete"
              @click="deleteFilmTypeName(scope.row)"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-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 = true
  console.log(queryParams)
  sysVideoCategoryGetPage(queryParams).then((res) => {
    console.log(res)
    dataList.value = res.records
    total.value = Number(res.total)
    loading.value = false
  }).catch(err => {
    loading.value = false
  })
}

function handleQuery () {
  queryParams.pageNum = 1
  getList()
}

function resetQuery () {
  queryParams.categoryName = null
  queryParams.pageNum = 1
  queryParams.pageSize = 10
  handleQuery()
}

function addFilmType () {
  form.value = {
    categoryName: null,
    showQuantity: null
  }
  open.value = true
  title.value = '新增影片类型'
}

function editFilmTypeName (row) {
  form.value = { ...row }
  open.value = true
  title.value = '编辑影片类型'
}

function deleteFilmType (row) {
  sysVideoCategoryDelete(row.id).then((res) => {
    dataList.value = res.data.records
    total.value = res.data.total
    loading.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) return
  formRef.value.validate(valid => {
    if (valid) {
      sysVideoCategoryEdit(form.value).then((res) => {
        open.value = false
        if (title.value = '新增影片类型') {
          ElMessage({
            type: 'success',
            message: '新增成功',
          })
        } else {
          ElMessage({
            type: 'success',
            message: '修改成功',
          })
        }
        getList()
      }).catch(err => {
        open.value = false
      })
    }
  })
}

function cancel () {
  open.value = false
  form.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.coloradmin.cn/o/1466871.html

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

相关文章

小程序画布（二维地图线）

小程序画布（二维地图线）

首先开始是想用小程序兼容openlayers的&#xff0c;但是了解到用不了&#xff0c;那就用画布来解决 实际效果如下 wxml中代码 <canvas id"trackDesignCanvas" //指定 id 的 Canvas 组件class"orbit-canvas-main" type"2d" …
阅读更多...
西门子200SMART SB AE01的正确用法

西门子200SMART SB AE01的正确用法

西门子200SMART SB AE01&#xff0c;就是1路模拟量输入的SB板。信号板直接安装在 SR/ST CPU 本体正面&#xff0c;无需占用电控柜空间&#xff0c;安装、拆卸方便快捷。有些小型的系统如果只有1路模拟量输入&#xff0c;或者模块配置中恰好缺少1路模拟量输入&#xff0c;就可以…
阅读更多...
幻兽帕鲁(Palworld 1.4.1)私有服务器搭建(docker版)

幻兽帕鲁(Palworld 1.4.1)私有服务器搭建(docker版)

文章目录 说明客户端安装服务器部署1Panel安装和配置docker服务初始化设置设置开机自启动设置镜像加速 游戏服务端部署游戏服务端参数可视化配置 Palworld连接服务器问题总结 说明 服务器硬件要求&#xff1a;Linux系统/Window系统&#xff08;x86架构&#xff0c;armbian架构…
阅读更多...
C++奇怪的 ::template

C++奇怪的 ::template

答疑解惑 怎么会有::template的写法 起初 在阅读stl的源码的时候&#xff0c;发现了一条诡异的代码 // ALIAS TEMPLATE _Rebind_alloc_t template<class _Alloc,class _Value_type> using _Rebind_alloc_t typename allocator_traits<_Alloc>::template rebind…
阅读更多...
【视频编码\VVC】环路滤波基础知识

【视频编码\VVC】环路滤波基础知识

本文为新一代通用视频编码H.266\VVC原理、标准与实现的简化笔记。 定义&#xff1a;在视频编码过程中进行滤波&#xff0c;滤波后的图像用于后续编码。 目的&#xff1a;1、提升编码图像的质量。2、为后续编码图像提供高质量参考&#xff0c;获得更好的预测效果。 VVC中主要…
阅读更多...
C语言-数组指针与指针数组

C语言-数组指针与指针数组

一、简介 对于使用C语言开发的人来说&#xff0c;指针&#xff0c;大家都是非常熟悉的。数组&#xff0c;大家也同样熟悉。但是这两个组合到一起的话&#xff0c;很多人就开始蒙圈了。这篇文章&#xff0c;就详细的介绍一下这两个概念。 指针数组和数组指针&#xff0c;听起来非…
阅读更多...
Stable Diffusion 模型分享：Realisian（现实、亚洲人）

Stable Diffusion 模型分享：Realisian（现实、亚洲人）

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八 下载地址 模型介绍 Realisian 是由多个模型合并而来&#xff0c;是一个现实模型&#xff0c;可以绘制美丽的亚…
阅读更多...
HarmonyOS学习--三方库

HarmonyOS学习--三方库

文章目录 一、三方库获取二、常用的三方库1. UI库&#xff1a;2. 网络库&#xff1a;3. 动画库&#xff1a; 三、使用开源三方库1. 安装与卸载2. 使用 四、问题解决1. zsh: command not found: ohpm 一、三方库获取 在Gitee网站中获取 搜索OpenHarmony-TPC仓库&#xff0c;在t…
阅读更多...
uniapp_微信小程序自定义顶部导航栏和右侧胶囊对齐（不对齐来打我）

uniapp_微信小程序自定义顶部导航栏和右侧胶囊对齐（不对齐来打我）

一、想要的效果 思路首先开启自定义导航栏&#xff0c;取消自带的导航栏&#xff0c;然后计算胶囊的高度和标题对齐 二、成品代码 1、首先再你需要居中的代码添加以下style <view class"header":style"{paddingTop:navBarTop px,height:navBarHeight px,…
阅读更多...
Excel 面试题及答案（2）

Excel 面试题及答案（2）

一、VLOOKUP+IF案例： A1 ：根据左侧数据源，按姓名匹配《职级》，仅限用函数，不能做任何辅助A2 ：根据左侧数据源，按姓名匹配《部门》，仅限用函数，不能做任何辅助A3 ：根据右侧考核规则，匹配《绩效比例》，用函数完成（可适当做辅助的单元格区域） =VLOOKUP(F8,IF({1,0},…
阅读更多...
【笔记】【开发方案】APN 配置参数 bitmask 数据转换（Android KaiOS）

【笔记】【开发方案】APN 配置参数 bitmask 数据转换（Android KaiOS）

一、参数说明 &#xff08;一&#xff09;APN配置结构对比 平台AndroidKaiOS文件类型xmljson结构每个<apn>标签是一条APN&#xff0c;包含完成的信息层级数组结构&#xff0c;使用JSON格式的数据。最外层是mcc&#xff0c;其次mnc&#xff0c;最后APN用数组形式配置&am…
阅读更多...
VirtualBox+Vagrant快速搭建Centos7

VirtualBox+Vagrant快速搭建Centos7

目录 安装VirtualBox&#xff1a; 安装Vagrant&#xff1a; 创建Vagrant项目目录&#xff1a; 初始化Vagrant配置文件&#xff1a; 本地Vagrantfile中的镜像名称&#xff1a; 启动虚拟机&#xff1a; SSH登录虚拟机&#xff1a; 备注&#xff1a;安装镜像的另一种方式是…
阅读更多...
【MATLAB】 EWT信号分解+FFT傅里叶频谱变换组合算法

【MATLAB】 EWT信号分解+FFT傅里叶频谱变换组合算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~ 展示出图效果 1 EWT分解算法 EWT分解算法是一种基于小波变换的信号分解算法&#xff0c;它可以将信号分解为一系列具有不同频率特性的小波分量。该算法的基本思想是将信号分解为多个不同尺度的小波分量&#xff0c;并对…
阅读更多...
展锐S8000安卓核心板参数_紫光展锐5G核心板模块定制方案

展锐S8000安卓核心板参数_紫光展锐5G核心板模块定制方案

展锐S8000核心板模块是基于八核S8000平台开发设计的&#xff0c;采用了先进的6nm EUV制程技术。搭载了全新的智能Android 13操作系统&#xff0c;展现出超强的画面解析能力和高性能双通道MIPI&#xff0c;拥有120Hz高刷新率&#xff0c;独立NPU和3.2TOPS Al算力&#xff0c;同时…
阅读更多...
2024年数学建模美赛详细总结以及经验分享

2024年数学建模美赛详细总结以及经验分享

前言&#xff1a; 本文记录与二零二四年二月六日&#xff0c;正好今天是数学建模结束&#xff0c;打算写篇文章记录一下整个过程&#xff0c;以及一些感受、还有经验分享。记录这个过程的原因就是我在赛前&#xff0c;在博客上找了很久&#xff0c;也没有像我这么类似记…
阅读更多...
2024，中国零售行业数字化走到哪了？

2024，中国零售行业数字化走到哪了？

对于如今的中国零售业数字化而言&#xff0c;仍有许多亟待解决的问题&#xff0c;其像一根根“鱼刺”&#xff0c;卡在零售企业增长的“喉咙”中。 作者|斗斗 编辑|皮爷 出品|产业家 熙熙攘攘的人群&#xff0c;琳琅满目年货&#xff0c;一张张喜庆的春联、福字、窗花……
阅读更多...
零基础备考PMP，需要多长时间？

零基础备考PMP，需要多长时间？

PMP是一门专业性很强的项目管理知识&#xff0c;考试当然是有一定的难度&#xff0c;但是也没有难到让你怀疑人生的程度。 如果你在学习PMP之前&#xff0c;已经有一些经验&#xff0c;那么备考一个半月基本上是没多大问题的&#xff0c;如果你是零基础小白&#xff0c;那么备…
阅读更多...
2024全国水科技大会暨流域水环境治理与水生态修复论坛（六）

2024全国水科技大会暨流域水环境治理与水生态修复论坛（六）

论坛召集人 冯慧娟 中国环境科学研究院流域中心研究员 刘 春 河北科技大学环境与工程学院院长、教授 一、会议背景 为深入贯彻“山水林田湖是一个生命共同体”的重要指示精神&#xff0c;大力实施生态优先绿色发展战略&#xff0c;积极践行人、水、自然和谐共生理念&…
阅读更多...
基于RK3399 Android11适配OV13850 MIPI摄像头

基于RK3399 Android11适配OV13850 MIPI摄像头

目录 1、原理图分析2、编写和配置设备树3、调试方法4、遇到的问题与解决5、补丁 1、原理图分析 从上图可看出&#xff0c;我们需要关心的&#xff0c;①MIPI数据和时钟接口使用的是MIPI_TX1/RX1 ②I2C使用的是I2C4总线 ③RST复位引脚使用的是GPIO2_D2 ④PWDN使用的是GPIO1_C7 ⑤…
阅读更多...
洛谷 【算法1-6】二分查找与二分答案

洛谷 【算法1-6】二分查找与二分答案

【算法1-6】二分查找与二分答案 - 题单 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 鄙人不才&#xff0c;刷洛谷&#xff0c;迎蓝桥&#xff0c;【算法1-6】二分查找与二分答案 已刷&#xff0c;现将 AC 代码献上&#xff0c;望有助于各位 P2249 【深基13.例1】查找 - 洛谷…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023