vue2升级到vue3的一些使用注意事项记录(三)

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

演示地址:RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://122.227.135.243:9888

19、this.$router.push可以修改成vue3的router.push

这里的const router = useRouter();

20、在vue2里的create()可以用onMounted来处理

如:

javascript 复制代码
onMounted(() => {
  getCategoryList();
  getList();
})

21、vue3里的resetForm功能实现

javascript 复制代码
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="流程标识" prop="processKey">
        <el-input
          v-model="queryParams.processKey"
          placeholder="请输入流程标识"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="流程名称" prop="processName">
        <el-input
          v-model="queryParams.processName"
          placeholder="请输入流程名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="流程分类" prop="category">
        <el-select v-model="queryParams.category" clearable placeholder="请选择" size="small">
          <el-option
            v-for="item in categoryOptions"
            :key="item.categoryId"
            :label="item.categoryName"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

上面的ref="queryForm" 进行重置,需要

const queryForm = ref(ElForm)

同时下面的重置操作

javascript 复制代码
/ 重置按钮操作
const resetQuery = () => {
    //resetForm("queryForm");
    queryForm.value.resetFields();
    handleQuery();
}

22、a-modal

这个显示由原来的:visible.sync修改成v-model:visible

23、el-table的element-plus页切换需要修改

原先vue2可以下面的代码

javascript 复制代码
<pagination
            v-show="deployTotal>0"
            :total="deployTotal"
            :page.sync="queryFlowParams.pageNum"
            :limit.sync="queryFlowParams.pageSize"
            @pagination="getDeployList"
          />

vue3要修改成如下:

javascript 复制代码
<pagination
            v-show="deployTotal>0"
            :total="deployTotal"
            v-model:page="queryFlowParams.pageNum"
            v-model:limit="queryFlowParams.pageSize"
            @pagination="getDeployList"
          />

24、element-plus很多大小原先size的mini都要修改成small,同时type的text已经删除了

25、要使用el-form的vue3版本最好这样定义

const formRef = ref<ElFormInstance>();

<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">

26、动态加载显示组件的修改

原先vue2

javascript 复制代码
allFormComponent:function(){
      return [
          {
            text:'单表示例',
            routeName: '@/views/workflow/demo/wf',
            component: () => import('@/views/workflow/demo/wf'),
            businessTable:'wf_demo'
          }     
    }

需要修改成vue3的

javascript 复制代码
const allFormComponent = computed(() => {
    return [
        {
          text:'单表示例',
          routeName: '@/views/workflow/demo/wf',
          component: defineAsyncComponent( () => import('@/views/workflow/demo/wf')),
          businessTable:'wf_demo'
        } 
    ]
  })
相关推荐
科技探秘人6 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人7 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR12 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香14 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969317 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai23 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc27 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_91531 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
待磨的钝刨3 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json