更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio
演示地址:RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/
更多nbcio-boot功能请看演示系统
gitee源代码地址
后端代码: https://gitee.com/nbacheng/nbcio-boot
前端代码:https://gitee.com/nbacheng/nbcio-vue.git
在线演示(包括H5) : http://218.75.87.38:9888
1、查看包版本信息
npm view [package_name] versions
2、VUE3里要混合ts与vue技术代码相互调用,需要在vite.config.ts设置如下
server: {
hmr: {
overlay: false,
},
3、vue3的plus中的el-tooltip 原来具名插槽的修改成如下template
<template> <el-tooltip placement="top"> <template #content> multiple lines<br />second line </template> <el-button>Top center</el-button> </el-tooltip> </template>
4、响应式数转换成非响应式数据,就是VUE3 proxy类型转成普通对象
一种是用toRaw,如const appType = toRaw(props.appType);
另外一种是const appType = JSON.parse(JSON.stringify(props.appType));
5、模板里的ref使用
要早setup里创建相同名称的ref,如:
<el-col :span="17"> <el-table ref="multipleTable" height="600" :data="userTableList" border @selection-change="handleSelectionChange"> <el-table-column type="selection" width="50" align="center" /> <el-table-column label="用户名" align="center" prop="nickName" /> <el-table-column label="部门" align="center" prop="dept.deptName" /> </el-table> <pagination :total="userTotal" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getUserList" /> </el-col>
就要定义相同名称的,如const multipleTable = ref(null)
就可以用multipleTable.value进行访问了
// 关闭标签 const handleClose = (tag) => { selectedUserDate.value.splice(selectedUserDate.value?.indexOf(tag), 1); multipleTable.value.toggleRowSelection(tag); }
6、一些全局变量的使用
const { proxy } = getCurrentInstance() as ComponentInternalInstance
如:proxy?.$modal.msgSuccess(text + "成功");
7、element-plus的对话框显示需要修改了
<!-- 候选用户弹窗 -->
<el-dialog title="候选用户" :visible.sync="userOpen" width="60%" append-to-body>
原先一般用:visible.sync,但这样不显示了,需要用v-model
<el-dialog title="候选用户" v-model="userOpen" width="60%" append-to-body>
否则会不显示