Java体系知识之ElementUI

学习如何借助于ElementUI，帮助快速实现效果

1 技术简介

(1)网站快速成型工具
(2)Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
(3)使用步骤：A.引入文件：<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">           </script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script>B.根据需求->找对应模板->复制粘贴->修改

2 常用组件(重点)

2.1 Basic

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><style>.el-row {margin-bottom: 20px;&:last-child {margin-bottom: 0;}}.el-col {border-radius: 4px;}.bg-purple-dark {background: #99a9bf;}.bg-purple {background: #d3dce6;}.bg-purple-light {background: #e5e9f2;}.grid-content {border-radius: 4px;min-height: 36px;}.row-bg {padding: 10px 0;background-color: #f9fafc;}</style></head><body><div id="root"><!-- Basic->Layout 布局 --><el-row :gutter="30"><el-col :span="6"><div class="grid-content bg-purple">111</div></el-col><el-col :span="6"><div class="grid-content bg-purple-light">222</div></el-col><el-col :span="6"><div class="grid-content bg-purple">333</div></el-col><el-col :span="6"><div class="grid-content bg-purple-light">444</div></el-col></el-row><!-- Basic->Button 按钮&Icon 图标 --><el-row><!-- icon：图标 --><el-button type="success" icon="el-icon-star-on" circle disabled>提交</el-button></el-row><!-- Basic->Link 文字链接 --><el-link type="success">成功链接</el-link></div></body><script>new Vue({el: "#root",data: {},methods: {},mounted() {}})</script>
</html>

2.2 Form

2.2.1 basic

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><style>/* .el-input {width: 30%;} */</style></head><body><div id="root"><!-- Form->Radio 单选框：需要设置v-model绑定变量；选中意味着变量的值为相应 Radio label属性的值；label可以是String、Number或Boolean；disabled设置禁用；--><el-radio v-model="radio" label="1">男</el-radio><el-radio v-model="radio" label="2" disabled>女</el-radio><br><br><!-- Form->Checkbox 多选框：checkbox-group元素能把多个 checkbox 管理为一组；需要在 Group 中使用v-model绑定Array类型的变量即可；disabled设置禁用；--><el-checkbox-group v-model="checkList"><el-checkbox label="复选框 A"></el-checkbox><el-checkbox label="复选框 B"></el-checkbox><el-checkbox label="复选框 C"></el-checkbox><el-checkbox label="禁用" disabled></el-checkbox><el-checkbox label="选中且禁用" disabled></el-checkbox></el-checkbox-group><br><!-- Form->Input 输入框：disabled：禁用；clearable：清空；show-password：密码框；prefix-icon：input 组件首部增加显示图标suffix-icon：input 组件尾部增加显示图标type：textarea设置文本域--><!-- <el-input v-model="input" placeholder="请输入内容" show-password></el-input> --><!-- <div class="demo-input-suffix">属性方式：<el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1"></el-input><el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2"></el-input></div> --><!-- Form->DateTimePicker 日期时间选择器：value-format：可选，绑定值的格式。不指定则绑定值为 Date 对象，string类型--><div class="block"><span class="demonstration">默认</span><!-- value-format   可选，绑定值的格式。不指定则绑定值为 Date 对象   string --><el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间"value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker></div>{{value1}}<br><!-- Form->Transfer 穿梭框：Transfer 的数据通过 data 属性传入;数据需要是一个对象数组；每个对象有以下属性：key 为数据的唯一性标识，label 为显示文本，disabled 表示该项数据是否禁止转移；目标列表中的数据项会同步到绑定至 v-model 的变量，值为数据项的 key 所组成的数组；titles：设置列表标题文案button-texts：设置按钮文案--><el-transfer v-model="value" :data="transferData" :titles="['未选列表', '已选列表']" :button-texts="['到左边', '到右边']"></el-transfer></div></body><script>new Vue({el: "#root",data: {radio: '1',checkList: ['选中且禁用', '复选框 A', '复选框 B'],input: '',input1: '',input2: '',value1: '',transferData: [{key: 1,label: 'Java'},{key: 2,label: 'Web'},{key: 3,label: 'Python'}, {key: 4,label: 'UI'}],value: [3, 4]},methods: {},mounted() {}})</script>
</html>

2.2.2 综合案例-登录

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><style>/* Card卡片 */.text {font-size: 14px;}.item {margin-bottom: 18px;}.clearfix:before,.clearfix:after {display: table;content: "";}.clearfix:after {clear: both}.box-card {width: 480px;margin: 179px auto;}</style></head><body><div id="root"><!-- Card卡片 --><el-card class="box-card"><div slot="header" class="clearfix"><span>登录</span></div><!-- Form表单：hide-required-asterisk   是否隐藏必填字段的标签旁边的红色星号--><el-form ref="loginForm" :model="loginForm" label-width="80px" :rules="rules" hide-required-asterisk><el-form-item label="用户名" prop="userName"><el-input v-model="loginForm.userName" prefix-icon="el-icon-user"></el-input></el-form-item><el-form-item label="密码" prop="userPwd"><el-input v-model="loginForm.userPwd" show-password prefix-icon="el-icon-lock"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('loginForm')">登录</el-button><el-button @click="resetForm('loginForm')">重置</el-button></el-form-item></el-form></el-card></div></body><script>new Vue({el: "#root",data: {loginForm: {userName: '',userPwd: '',},rules: {userName: [{required: true,message: '请输入用户名',trigger: 'blur'},{min: 4,max: 8,message: '长度在 4 到 8 个字符',trigger: 'blur'}],userPwd: [{required: true,message: '请输入密码',trigger: 'blur'},{min: 4,max: 8,message: '长度在 4 到 8 个字符',trigger: 'blur'}],}},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {console.log(valid);if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}},mounted() {}})</script>
</html>

2.3 Data

2.3.1 Table表格

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><body><div id="root"><!-- Table 表格：el-table：表格data：显示的数据，array类型prop：对应对象中的键名即可填入数据width：定义列宽stripe：创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用border：否带有纵向边框，boolean类型，默认是falserow-class-name：为Table 中的某一行添加 class，表明该行处于某种状态height：固定表头fixed：固定列，Boolean 值或者leftright，表示左边固定还是右边固定--><el-table :data="tableData" style="width: 80%" :row-class-name="tableRowClassName"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址" width="180"></el-table-column><el-table-column prop="sex" label="性别" width="180"><!-- <template slot-scope="scope"><el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag></template> --><!-- slot-scope="scope" | v-slot="scope" --><template v-slot="scope"><el-tag :type="scope.row.sex === 0 ? 'warning' : 'success'"><span v-if="scope.row.sex==0">男</span><span v-if="scope.row.sex==1">女</span></el-tag></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="small" type="warning" @click="handleEdit(scope.$index, scope.row)">修改</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></div></body><script>new Vue({el: "#root",data: {/* 表格要呈现的数据 */tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',sex: 0}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',sex: 1}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',sex: 0}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',sex: 1}]},methods: {/* 表格样式 */tableRowClassName({row,rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';},/* 修改当前行数据 */handleEdit(index, row) {console.log(index, row);},/* 删除当前行数据 */handleDelete(index, row) {console.log(index, row);}},mounted() {}})</script>
</html>

2.3.2 Pagination 分页

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><style></style></head><body><div id="root"><!-- Pagination 分页：size-change：每页显示条数pageSize改变时触发current-change：当前页currentPage改变时触发current-page：当前页数，number类型，默认值1page-sizes：每页显示个数选择器的选项设置，number[]类型，比如[10, 20, 30, 40, 50, 100]page-size：每页显示条目个数，number类型，默认10total：总条目数，number类型--><div class="block"><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="20"layout="total, sizes, prev, pager, next, jumper" :total="40"></el-pagination></div></div></body><script>new Vue({el: "#root",data: {currentPage4: 4},methods: {/* 每页显示数据条数发生改变时 */handleSizeChange(val) {console.log(val);// console.log(`每页 ${val} 条`);// 使用Axios向服务器端发请求},/* 当前页发生改变时 */handleCurrentChange(val) {console.log(val);// console.log(`当前页: ${val}`);// 使用Axios向服务器端发请求}},mounted() {}})</script>
</html>

2.3.3 Tree 树形控件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><style></style></head><body><!-- 分别通过default-expanded-keys和default-checked-keys设置默认展开和默认选中的节点。需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的--><div id="root"><el-tree :data="treeData" show-checkbox node-key="code" :default-expanded-keys="expandedKeys":default-checked-keys="checkedKeys" :props="defaultProps"></el-tree></div></body><script>new Vue({el: "#root",data: {/* 默认展开 */expandedKeys:[3],/* 默认选中 */checkedKeys:[2,4],treeData: [{code: 1,name: '一级 1',son: [{code: 4,name: '二级 1-1',son: [{code: 9,name: '三级 1-1-1'}, {code: 10,name: '三级 1-1-2'}]}]}, {code: 2,name: '一级 2',son: [{code: 5,name: '二级 2-1'}, {code: 6,name: '二级 2-2'}]}, {code: 3,name: '一级 3',son: [{code: 7,name: '二级 3-1'}, {code: 8,name: '二级 3-2'}]}],defaultProps: {children: 'son',label: 'name'}},methods: {},mounted() {}})</script>
</html>

2.3.4 Message 消息提示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><style></style></head><body><div id="root"><!-- 使用场景：增加、修改、删除等操作后，给用户设置提示信息--><el-button :plain="true" @click="open2">成功</el-button><el-button :plain="true" @click="open4">错误</el-button></div></body><script>new Vue({el: "#root",data: {},methods: {open2() {this.$message({showClose: true,message: '恭喜你，这是一条成功消息',type: 'success'});},open4() {this.$message({showClose: true,/* 利用响应数据：状态码、描述信息、数据 */message: '登录失败',type: 'error'});}},mounted() {}})</script>
</html>

2.3.5 MessageBox 弹框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><style></style></head><body><div id="root"><!-- 使用场景：执行删除：给用户再次考虑的机会，等用户确定后再真正的执行删除--><el-button type="text" @click="deleteData">删除</el-button></div></body><script>new Vue({el: "#root",data: {},methods: {/* 删除操作 */deleteData() {this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {/* this.$message({type: 'success',message: '删除成功!'}); */// 使用Axios向服务器端发请求，执行删除}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});}},mounted() {}})</script>
</html>

2.3.6 综合案例-系统主界面

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><style>/* Container 布局容器 */.el-header,.el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}body>.el-container {margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;}.el-container:nth-child(7) .el-aside {line-height: 320px;}/* 自增样式 */html,body,#root,.el-container {height: 100%;}* {margin: 0;padding: 0;}</style></head><body><div id="root"><!-- Container 布局容器 --><el-container><el-header>java教育金融系统<!-- <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item></el-menu> --></el-header><el-container><el-aside width="200px"><el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen"@close="handleClose"><!-- 属性绑定 --><el-submenu :index="menu.menuId.toString()" v-for="menu in menuList"><template slot="title"><!-- 图标 --><i :class="menu.menuIcon"></i><!-- 插值语法 --><span>{{menu.menuName}}</span></template><el-menu-item-group><el-menu-item :index="sub.menuId.toString()" v-for="sub in menu.subMenu">{{sub.menuName}}</el-menu-item><!-- <el-menu-item index="1-2">选项2</el-menu-item> --></el-menu-item-group></el-submenu><!-- <el-submenu index="2"><template slot="title"><i class="el-icon-location"></i><span>导航二</span></template><el-menu-item-group><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group></el-submenu> --></el-menu></el-aside><el-main>Main</el-main></el-container></el-container></div></body><script>new Vue({el: "#root",data: {activeIndex2: '1',// 模拟数据menuList: [{"menuId": 1000,"menuName": "系统模块","menuIcon": "el-icon-s-tools","subMenu": [{"menuId": 1001,"menuName": "用户模块"}, {"menuId": 1002,"menuName": "菜单模块"}]}, {"menuId": 2000,"menuName": "产品模块","menuIcon": "el-icon-s-goods","subMenu": [{"menuId": 2001,"menuName": "产品系列模块"}, {"menuId": 2002,"menuName": "产品基础模块"}]}]},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);},handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},queryMenus() {/* axios.post("", "").then(resp => {console.log(resp);// 假设服务端返回的数据格式如下var menus = [{"menuId": 1000,"menuName": "系统模块","menuIcon": "el-icon-s-tools","subMenu": [{"menuId": 1001,"menuName": "用户模块"}, {"menuId": 1002,"menuName": "菜单模块"}]}, {"menuId": 2000,"menuName": "产品模块","menuIcon": "el-icon-s-goods","subMenu": [{"menuId": 2001,"menuName": "产品系列模块"}, {"menuId": 2002,"menuName": "产品基础模块"}]}];this.menuList = menus;}).catch(error => {console.log(error);}); */}},mounted() {this.queryMenus();}})</script>
</html>

2.3.7 Dialog 对话框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><style></style></head><body><div id="root"><!-- Dialog 对话框:自定义内容使用场景：增加、修改等操作--><!-- 点击增加按钮，打开与之关联的增加对话框--><el-button type="success" @click="addDialogFormVisible = true">增加</el-button><!-- 增加对话框--><el-dialog title="增加" :visible.sync="addDialogFormVisible"><!-- 增加表单--><el-form :model="addForm"><el-form-item label="活动名称" :label-width="formLabelWidth"><el-input v-model="addForm.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活动区域" :label-width="formLabelWidth"><el-select v-model="addForm.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><!-- 点击取消按钮时：关闭对话框点击确定按钮时：关闭对话框；向服务器端发请求，执行数据保存操作--><el-button @click="addDialogFormVisible = false">取 消</el-button><el-button type="primary" @click="addDialogFormVisible = false">确 定</el-button></div></el-dialog></div></body><script>new Vue({el: "#root",data: {addDialogFormVisible: false,addForm: {name: '',region: ''},formLabelWidth: '120px'},methods: {},mounted() {}})</script>
</html>

Java体系知识之ElementUI相关推荐

Java体系知识学习——Java怎么学？
软件公司组织架构为了改善我们的生活,努力工作,到金字塔的上层. Java基础 Java SE 数据结构.算法.集合.多线程.JVM.IO.NIO.JDBC Java EE JSP.Servlet.J ...
Java部分知识体系总结
文章目录 Java面试总结基础知识 Java概述基础语法面向对象集合框架 IO流网络编程常用API 日期时间API 常用工具类库单元测试异常日志 Java8新特性工具 IDEA E ...
30 张Java 的思维导图，全面梳理构建 Java 的知识体系
小编这几天在网上收集了 30 张大佬制作的 Java 知识点总结的思维导图,整理成了这篇文章分享给大家,帮助大家梳理构建 Java 的知识体系. 这份思维导图包含从Java的简介.主要特性.发展历史到 ...
Java基础知识第二讲：Java开发手册/JVM/集合框架/异常体系/Java反射/语法知识/Java IO
Java基础知识第二讲(Java编程规范/JVM/集合框架/异常体系/Java反射/语法知识/Java IO/码出高效) 分享在java学习及工作中,常使用的一些基础知识,本文从JVM出发,讲解了JV ...
Java基础知识体系_计算机与java
Java基础知识体系 (一).计算机与java (二).变量与类型 (三).运算符 (四).流程控制 (五).数组 (一).计算机与java 1,计算机:硬件+软件硬件:客观存在的各种计算机相关设备 ...
【转】Java基础知识整理
本博文内容参考相关博客以及<Java编程思想>整理而成,如有侵权,请联系博主. 转载请注明出处:http://www.cnblogs.com/BYRans/ PDF版下载链接:<Ja ...
java 基础知识总结
Java基础知识总结写代码: 1,明确需求.我要做什么? 2,分析思路.我要怎么做?1,2,3. 3,确定步骤.每一个思路部分用到哪些语句,方法,和对象. 4,代码实现.用具体的java语言代码把思 ...
Java多线程知识小抄集(四)——完结
欢迎支持笔者新作:<深入理解Kafka:核心设计与实践原理>和<RabbitMQ实战指南>,同时欢迎关注笔者的微信公众号:朱小厮的博客. 欢迎跳转到本文的原文链接:https: ...
Java基础知识复习(一)
Java基础知识复习(一) 目录 Java简介命名规则八种基本的数据类型字面量类型转换变量的形态逻辑运算符位运算移位运算习题知识点目录 Java简介 Java是由Sun公司在199 ...

Java体系知识之ElementUI

Java体系知识之ElementUI

1 技术简介

2 常用组件(重点)

2.1 Basic

2.2 Form

2.2.1 basic

2.2.2 综合案例-登录

2.3 Data

2.3.1 Table表格

2.3.2 Pagination 分页

2.3.3 Tree 树形控件

2.3.4 Message 消息提示

2.3.5 MessageBox 弹框

2.3.6 综合案例-系统主界面

2.3.7 Dialog 对话框

Java体系知识之ElementUI相关推荐

最新文章

热门文章