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来处理

如：

onMounted(() => {getCategoryList();getList();
})

21、vue3里的resetForm功能实现

<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="流程标识" prop="processKey"><el-inputv-model="queryParams.processKey"placeholder="请输入流程标识"clearablesize="small"@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="流程名称" prop="processName"><el-inputv-model="queryParams.processName"placeholder="请输入流程名称"clearablesize="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-optionv-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)

同时下面的重置操作

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

22、a-modal

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

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

原先vue2可以下面的代码

<paginationv-show="deployTotal>0":total="deployTotal":page.sync="queryFlowParams.pageNum":limit.sync="queryFlowParams.pageSize"@pagination="getDeployList"/>

vue3要修改成如下：

<paginationv-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

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

需要修改成vue3的

const allFormComponent = computed(() => {return [{text:'单表示例',routeName: '@/views/workflow/demo/wf',component: defineAsyncComponent( () => import('@/views/workflow/demo/wf')),businessTable:'wf_demo'} ]})