网站首页 > java教程 正文
1.编译报Error:java: java.lang.ExceptionInInitializerError错误
该错误是由于没有正确的设置本地JDK版本所致，IDEA中设置FILE-project structure的JDK版本即可。
Bash
<el-container>
<iframe name="right" class="el-main" src="ordersetting.html" width="100%" height="580px" frameborder="0"></iframe>
</el-container>2.iframe可在iframe模块中显示本地html或外部网站。
3.展示左侧菜单
Bash
<el-menu>
<el-submenu v-for="menu in menuList" :index="menu.path">
<template slot="title">
<i class="fa" :class="menu.icon"></i>
{{menu.title}}
</template>
<template v-for="child in menu.children">
<el-menu-item :index="child.path">
<a :href="child.linkUrl" target="right">{{child.title}}</a>
</el-menu-item>
</template>
</el-submenu>
</el-menu>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
new Vue({
el: '#app',
data:{
menuList:[
{
"path": "1",
"title": "工作台",
"icon":"fa-dashboard",
"children": []
},
{
"path": "2",
"title": "会员管理",
"icon":"fa-user-md",
"children": [
{
"path": "/2-1",
"title": "会员档案",
"linkUrl":"member.html",
"children":[]
},
{
"path": "/2-2",
"title": "体检上传",
"children":[]
},
{
"path": "/2-3",
"title": "会员统计",
"linkUrl":"all-item-list.html",
"children":[]
},
]
},
{
"path": "3",
"title": "预约管理",
"icon":"fa-tty",
"children": [
{
"path": "/3-1",
"title": "预约列表",
"linkUrl":"ordersettinglist.html",
"children":[]
},
{
"path": "/3-2",
"title": "预约设置",
"linkUrl":"ordersetting.html",
"children":[]
},
{
"path": "/3-3",
"title": "套餐管理",
"linkUrl":"setmeal.html",
"children":[]
},
{
"path": "/3-4",
"title": "检查组管理",
"linkUrl":"checkgroup.html",
"children":[]
},
{
"path": "/3-5",
"title": "检查项管理",
"linkUrl":"checkitem.html",
"children":[]
},
]
},
{
"path": "4",
"title": "健康评估",
"icon":"fa-stethoscope",
"children":[
{
"path": "/4-1",
"title": "中医体质辨识",
"linkUrl":"all-medical-list.html",
"children":[]
},
]
},
{
"path": "5", //菜单项所对应的路由路径
"title": "统计分析", //菜单项名称
"icon":"fa-heartbeat",
"children":[//是否有子菜单，若没有，则为[]
{
"path": "/5-1",
"title": "工作量统计",
"linkUrl":"all-medical-list.html",
"children":[]
}
]
}
]
}
});
$(function() {
var wd = 200;
$(".el-main").css('width', $('body').width() - wd + 'px');
});
</script>menulist取自于vue的data.
4 弹出窗口
<!-- 新增标签弹层 -->
<div class="add-form">
<el-dialog title="新增检查项" :visible.sync="dialogFormVisible">
<el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
<el-row>
<el-col :span="12">
<el-form-item label="项目编码" prop="code">
<el-input v-model="formData.code"/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目名称" prop="name">
<el-input v-model="formData.name"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="性别">
<el-select v-model="formData.sex">
<el-option label="不限" value="0"></el-option>
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="适用年龄">
<el-input v-model="formData.age"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="类型">
<el-select v-model="formData.type">
<el-option label="检查" value="1"></el-option>
<el-option label="检验" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="价格">
<el-input v-model="formData.price"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="项目说明">
<el-input v-model="formData.remark" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="注意事项">
<el-input v-model="formData.attention" type="textarea"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="handleAdd()">确定</el-button>
</div>
</el-dialog>
</div>
prop指定了vue data中的formdata表单中的字段，针对其可定义验证规则如下——
rules: {//校验规则
code: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],
name: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }]
}
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
var vue = new Vue({
el: '#app',
data:{
pagination: {//分页相关模型数据
currentPage: 1,//当前页码
pageSize:10,//每页显示的记录数
total:0,//总记录数
queryString:null//查询条件
},
dataList: [],//当前页要展示的分页列表数据
formData: {},//表单数据
dialogFormVisible: false,//增加表单是否可见
dialogFormVisible4Edit:false,//编辑表单是否可见
rules: {//校验规则
code: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],
name: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }]
}
},
//钩子函数，VUE对象初始化完成后自动执行
created() {
},
methods: {
//编辑
handleEdit() {
},
//添加
handleAdd () {
},
//分页查询
findPage() {
},
// 重置表单
resetForm() {
this.formData = {};
},
// 弹出添加窗口
handleCreate() {
this.dialogFormVisible = true;
this.resetForm();
},
// 弹出编辑窗口
handleUpdate(row) {
},
//切换页码
handleCurrentChange(currentPage) {
},
// 删除
handleDelete(row) {
}
}
})
</script>
5提交表单数据
猜你喜欢
- 2024-10-26 Java中字符串填充零和去零的常用方法
- 2024-10-26 java OOM内存泄漏原因及解决方法（java常见内存泄漏原因）
- 2024-10-26 高级Java开发 面试必备的JVM知识点(一)
- 2024-10-26 解决ServletException: java.lang.NoSuchMethodError
- 2024-10-26 干货:日常Java报错整理（java的错误异常怎么处理）
- 2024-10-26 SpringBoot执行jar报错java.lang.OutOfMemoryError_指定内存大小
- 2024-10-26 Springboot2.0学习6 使用配置文件
- 2024-10-26 Java类型之间的转换（java类型之间的转换是什么）
- 2024-10-26 mybatis中报出java.lang.UnsupportedOperationException错误
- 2024-10-26 JavaEE 项目常见错误汇总(进一步补充)
欢迎 你 发表评论:
- 最近发表
- 标签列表
-
- java反编译工具 (77)
- java反射 (57)
- java接口 (61)
- java随机数 (63)
- java7下载 (59)
- java数据结构 (61)
- java 三目运算符 (65)
- java对象转map (63)
- Java继承 (69)
- java字符串替换 (60)
- 快速排序java (59)
- java并发编程 (58)
- java api文档 (60)
- centos安装java (57)
- java调用webservice接口 (61)
- java深拷贝 (61)
- 工厂模式java (59)
- java代理模式 (59)
- java.lang (57)
- java连接mysql数据库 (67)
- java重载 (68)
- java 循环语句 (66)
- java反序列化 (58)
- java时间函数 (60)
- java是值传递还是引用传递 (62)
本文暂时没有评论，来添加一个吧(●'◡'●)