Vue
-
定义
-
Vue是一套前端框架，可以免除原生JavaScript中的DOM操作，简化书写
-
之前所学的MyBatis框架是用来简化JDBC代码编写的；而Vue是前端框架，用来简化JavaScript代码编写的
-
在Axios与JSON综合案例的添加中有大量的DOM操作，示例如下：
let brandName = document.getElementById("brandName").value; let companyName = document.getElementById("companyName").value; let ordered = document.getElementById("ordered").value; let description = document.getElementById("description").value; // 获取单选框数组 let status = document.getElementsByName("status"); //2.3 给JS对象设置数据 formData.brandName = brandName; formData.companyName = companyName; formData.ordered = ordered; formData.description = description;
-
-
它是基于MVVM（Model-View-ViewModel）思想，可实现数据的双向绑定 ，将编程的关注点放在数据上
- 注意：之前所学的MVC模式只能实现模型到视图的单向展示，并不能视图和模型之间的相互绑定（即模型和视图只要有一方变化，另一方也会跟着改变）
-
可自行在官网学习
-
Vue快速入门
-
新建Html页面并引入
Vue.js文件-
若引入本地Vue文件（博主用的为最后一版VUE2：
Vue2.7.16开发环境，可自行到官网下载对应js文件）<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script> -
若引入远程npm包提供的Vue服务
-
开发环境
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -
生产环境
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
-
-
-
在JS代码区域（在
<Script>标签体内），创建Vue核心对象进行数据绑定-
创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：
属性 解释 el指定哪些标签受 Vue 管理。 该属性取值 #app中的app为受Vue管理的标签的id属性值data用来定义数据类型 methods用于定义的函数，可以通过 return 来返回函数值 new Vue({el:"#app",data() {return {username : ""}} });
-
-
编写视图（Html代码）
- 在以下示例中
div标签的id为app，对应创建Vue对象中el的属性值 <input>标签创建一个输入框，用v-model属性来将该输入框与Vue模型进行双向绑定- 其中
v-model属性值对应创建Vue对象中return括号中的模型名一致
- 其中
{{}}是 Vue 中定义的 插值表达式 ，用来取模型中的数据
<div id="app"><input name="username" v-model="username">{{username}} </div> - 在以下示例中
-
完整的vueDemo1.html文件代码如下
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><input name="username" v-model="username">{{username}}</div><!--引入vue.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><script>// 创建Vue核心对象new Vue({el:"#app",//data() 是 ECMAScript 6 版本的新的写法data() {return {username : ""}}/*等同于data: function () {return {username : ""}}这个是老版本*/});</script></body> </html>浏览器打开该html页面后，运行截图如下所示
Vue指令
| 指令 | 作用 |
|---|---|
v-bind | 为HTML标签绑定属性值，如设置 href , css样式等 |
v-model | 在表单元素上创建双向数据绑定 |
v-on | 为HTML标签绑定事件 |
v-if | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
v-else | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
v-else-if | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
v-for | 列表渲染，遍历容器的元素或者对象的属性 |
- 定义：
Html标签上带有v-前缀的特殊属性，不同指令具有不同的含义。
v-bind、v-model
-
v-bind：为HTML标签绑定属性值，如设置href,css样式等-
示例如下：
<a v-bind:href="url">百度一下</a> -
可简写为
<a :href="url">百度一下</a>将来只要url发生变化，对应的
v-bind的属性值也会随之立即改变
-
-
v-model：在表单元素上创建双向数据绑定-
示例如下
<input name="username" v-model="username">
-
-
完整示例如下
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><input name="urlname" v-model="url">{{url}}<br><a :href="url">点击一下跳转</a></div><!--引入vue.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><script>// 创建Vue核心对象new Vue({el:"#app",//data() 是 ECMAScript 6 版本的新的写法data() {return {url : ""}}/*等同于data: function () {return {url : ""}}这个是老版本*/});</script></body> </html>
v-on
-
v-on：为Html标签绑定事件 -
示例：给单击按钮绑定了一个事件该事件执行
show()方法，该方法写在methods体内- 不论是完整形式还是简略形式，若绑定的事件为一个方法则这个方法可以省略括号
- 完整形式如下
<input type="button" value="按钮" v-on:click="show()"> <!--等同于如下形式--> <input type="button" value="按钮" v-on:click="show">- 简略形式如下
<input type="button" value="按钮" @click="show()"> <!--等同于如下形式--> <input type="button" value="按钮" @click="show"> -
完整代码示例如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><input type="button" value="按钮" v-on:click="show()"><!--简略形式--><input type="button" value="按钮" @click="sunShow"></div><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><script>new Vue({el:"#app",methods:{show() {alert("第一个按钮被点击");},sunShow() {alert("第二个按钮被点击")}}});</script></body> </html>通过浏览器打开该html页面后，运行截图如下：
v-if、v-show
-
v-if、v-else、v-else-if：条件性的渲染某元素，判定为true时渲染，反之则不渲染- 它们联合使用相当于
if-else if-else
<div v-if="count == 3">count==3</div> <div v-else-if="count == 2">count==2</div> <div v-else>count !=2 && count != 3</div>-
完整代码示例如下
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app">请输入count的值：<br><input type="text" v-model="count"><br>count值为：<br><div v-if="count == 3">count==3</div><div v-else-if="count == 2">count==2</div><div v-else>还未输入，请输入count值</div></div><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><script>new Vue({el:"#app",data() {return {count:""}}});</script></body> </html>浏览器打开该html页面后运行截图如下
- 它们联合使用相当于
-
v-show：根据条件展示某元素v-show和v-if效果一样，但实现原理不一样：v-show不展示的原理是给对应的标签添加displaycss属性，并将该属性值设置为none，而v-if是直接没有div标签，只有符合条件的时候，源码中才会出现对应的div标签。可详见完整代码示例截图
<div v-show="count == 3">div4</div> -
完整代码示例如下
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app">请输入count的值：<br><input type="text" v-model="count"><br>count值为：<br><div v-if="count == 3">count==3</div><div v-else-if="count == 2">count==2</div><div v-else>还未输入，请输入count值</div><hr><div v-show="count == 3">v-show：当count==3时展示</div></div><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><script>new Vue({el:"#app",data() {return {count:""}}});</script></body> </html>浏览器打开该html文件，运行截图如下：
v-for
-
v-for：列表渲染，遍历容器的元素或者对象的属性 -
普通方式遍历数组
<div v-for="addr in addrs">{{addr}}<br> </div> -
索引方式遍历数组
<div v-for="(addr,i) in addrs">{{i+1}}：{{addr}}<br> </div> -
代码示例
-
普通方式遍历数组
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><!--遍历数组--><div v-for="addr in addrs">{{addr}}<br></div></div><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><script>new Vue({el:"#app",data() {return {addrs:["北京", "上海", "天津"]}}});</script></body> </html>
-
索引方式遍历数组
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><!--索引方式遍历数组--><div v-for="(addr,i) in addrs">{{i+1}}：{{addr}}<br></div></div><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><script>new Vue({el:"#app",data() {return {addrs:["北京", "上海", "天津"]}}});</script></body> </html>
-
Vue生命周期
| 状态 | 阶段周期 |
|---|---|
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 载入前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestroy | 销毁前 |
destroyed | 销毁后 |
-
Vue生命周期有八个阶段
- 每触发一个生命周期事件就会自动执行一个生命周期方法 （也称为钩子方法）
-
以下是各生命周期所处位置
-
mounted：挂载完成，Vue初始化成功，Html页面渲染成功-
我们可以在该方法中发送异步请求，加载数据
-
简单示例
new Vue({el:"#app",mounted() {alert("Vue挂载完毕，发送异步请求") } });
-
-
完整代码示例
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><!--普通方式遍历数组--><div v-for="addr in addrs">{{addr}}<br></div><!--索引方式遍历数组--><div v-for="(addr,i) in addrs">{{i+1}}：{{addr}}<br></div></div><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><script>new Vue({el:"#app",data() {return {addrs:["北京", "上海", "天津"]}},//简略版本mounted() {alert("Vue挂载完毕，发送异步请求")}/*老版本mounted:function () {}*/});</script></body> </html>
Vue案例
- 目标：使用Vue简化品牌的查询和添加功能
- 该案例以Axios、JSON综合案例为基础，本项目名为：
VueDemo，已上传到Gitee，可自行下载
查询所有
-
brand.html所作修改如下
-
brand.html代码更改如下：- 引入vue.js文件
- 创建Vue核心对象进行数据绑定
- 利用
mounted方法在页面加载完成后发送异步请求并查询数据
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><table border="1" cellspacing="0"><tr><th>序号</th><th>品牌名称</th><th>企业名称</th><th>排序</th><th>品牌介绍</th><th>状态</th><th>操作</th></tr><!--使用v-for循环遍历--><tr v-for="(brand,i) in brands" align="center"><td>{{i + 1}}</td><td>{{brand.brandName}}</td><td>{{brand.companyName}}</td><td>{{brand.ordered}}</td><td>{{brand.description}}</td><td>{{brand.status == 1 ? "启用" : "禁用"}}</td><td><a href="#">修改</a><a href="#">删除</a></td></tr></table></div><script src="js/axios-0.18.0.js"></script><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><script>new Vue({el: "#app",data() {return {brands:[]}},// 页面加载完成后利用mounted方法发送异步请求并查询数据mounted() {// 发送异步请求并查询数据// 在Vue的实例方法中，this指向Vue实例本身var _this = this;axios({method:"get",url:"http://localhost:8080/VueDemo/selectAllServlet"}).then(function (resp) {// 获取响应数据，并将数据赋给brands// 错误写法：this.brands = resp.data;/* 在Axios的then方法的回调函数中，this可能指向其他对象，通常是全局对象（在浏览器中是 window 对象）所以需要提前将代指Vue示例本身的this赋给_this*///axios会自动将获取的JSON字符串数据转为js对象数组_this.brands = resp.data;})}})</script></body> </html>Tomcat运行该Web项目后截图如下所示
-
问题
-
为什么要
var _this = this,为什么不直接this.brands=resp.dataJavaScript 中的
this关键字的行为依赖于调用它的上下文。在 Vue 的实例方法中，this指向 Vue 实例本身。但在 Axios 的then方法的回调函数中，this可能指向其他对象，通常是全局对象（在浏览器中是window对象）。这就会导致你无法正确访问 Vue 实例的属性和方法。通过定义
var _this = this，你将 Vue 实例的this存储在_this变量中，然后在回调函数中使用_this来正确引用 Vue 实例。
-
添加
-
addbrand.html所作修改如下
-
brand.html代码更改如下：- 创建新增按钮并为其绑定单击事件
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><!--给新增按钮绑定单击事件--><input type="button" value="新增" v-on:click="addBrand()"><br><hr><table border="1" cellspacing="0"><tr><th>序号</th><th>品牌名称</th><th>企业名称</th><th>排序</th><th>品牌介绍</th><th>状态</th><th>操作</th></tr><!--使用v-for循环遍历--><tr v-for="(brand,i) in brands" align="center"><td>{{i + 1}}</td><td>{{brand.brandName}}</td><td>{{brand.companyName}}</td><td>{{brand.ordered}}</td><td>{{brand.description}}</td><td>{{brand.status == 1 ? "启用" : "禁用"}}</td><td><a href="#">修改</a><a href="#">删除</a></td></tr></table></div><script src="js/axios-0.18.0.js"></script><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><script>new Vue({el: "#app",data() {return {brands:[]}},methods:{addBrand() {location.href = "/VueDemo/addBrand.html";}},// 页面加载完成后利用mounted方法发送异步请求并查询数据mounted() {// 发送异步请求并查询数据// 在Vue的实例方法中，this指向Vue实例本身var _this = this;axios({method:"get",url:"http://localhost:8080/VueDemo/selectAllServlet"}).then(function (resp) {// 获取响应数据，并将数据赋给brands// 错误写法：this.brands = resp.data;/* 在Axios的then方法的回调函数中，this可能指向其他对象，通常是全局对象（在浏览器中是 window 对象）所以需要提前将代指Vue示例本身的this赋给_this*///axios会自动将获取的JSON字符串数据转为js对象数组_this.brands = resp.data;})}})</script></body> </html> -
addBrand.html代码修改如下：- 引入
vue.js文件 - 创建Vue核心对象进行数据绑定
- 利用
v-model属性在表单元素上进行双向数据绑定 - 为提交按钮绑定单击事件
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>添加品牌</title></head><body><h3>添加品牌</h3><div id="app"><!--表单直接提交属于同步请求方式提交表单，为了使用异步方式以及AJAX+JSON异步方式提交所以要将action属性值设为空并将提交按钮的type属性值设为button--><!--action的属性值为浏览器提交到服务器的资源路径--><!--将action属性值由具体的url改为空--><form action="" method="post">品牌名称：<input id="brandName" name="brandName" v-model="brand.brandName"><br>企业名称：<input id="companyName" name="companyName" v-model="brand.companyName"><br>排序：<input id="ordered" name="ordered" v-model="brand.ordered"><br>描述信息：<textarea rows="5" cols="20" id="description" name="description" v-model="brand.description"></textarea><br>状态：<input type="radio" name="status" value="0" v-model="brand.status">禁用<input type="radio" name="status" value="1" v-model="brand.status">启用<br><!--将提交按钮的type属性由submit改为button--><input type="button" v-on:click="submitForm()" value="提交"></form></div><script src="js/axios-0.18.0.js"></script><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><script>new Vue({el: "#app",data() {return {/*由于数据最终要封装为对象，所以直接创建一个对象即可注意：不需要给该对象属性，是因为 Vue.js 的双向数据绑定机制和响应式系统会自动处理，即v-model 自动创建对象属性并追踪它们，只要用户填写输入框，就会自动将其作为brand对象的属性封装起来*/brand:{}}},methods:{submitForm() {var _this = this;// 发送axios请求并添加数据axios({method:"post",url:"http://localhost:8080/VueDemo/addServlet",//3 JSON数据格式发送请求// formData为JS对象，Axios会自动将JS对象转为JSON字符串然后在传给服务端data:_this.brand}).then(function (resp) {//4 获取响应数据并判断响应数据是否为successif(resp.data == "success"){location.href = "http://localhost:8080/VueDemo/brand.html";}})}}})</script></body> </html>Tomcat运行该Web项目后，运行截如下所示
- 引入
Element
-
定义
- 它是一套基于Vue的网站组件库，可用于快速构建网页
- 组件：即组成网页的部件，如：超链接、按钮、图片、表格等待
- 可根据Element官网进行学习
-
注意：
- 快速入门中用到的
element-ui下载官网无法下载，可利用如下代码自行下载（可自行更改下载路径以及对应版本的url）
import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; import java.nio.charset.StandardCharsets; import java.util.ArrayList;/*** 下载element-ui*/ public class Main {//本地保存目录static String fileP = "F:/insert/java/element-ui/";//urlstatic String urlP = "https://unpkg.com/browse/element-ui@2.15.14/";static String urlF = "https://unpkg.com/element-ui@2.15.14/";public static void main(String[] args){try {GetPage("");} catch (Exception e) {e.printStackTrace();}System.out.println("done ......");}static void GetPage(String after) throws Exception {System.out.println(urlP + after);new File(fileP + after).mkdir();HttpURLConnection http = (HttpURLConnection) (new URL(urlP + after)).openConnection();http.setRequestMethod("GET");http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");http.connect();if(http.getResponseCode() == 200) {InputStream inputStream = http.getInputStream();byte [] buffer = new byte[10240];ArrayList<byte []> byteList = new ArrayList<>();ArrayList<Integer> byteLength = new ArrayList<>();int length;int totalLength = 0;while( (length = inputStream.read(buffer)) != -1 ) {byteList.add(buffer);byteLength.add(length);totalLength += length;buffer = new byte[10240];}http.disconnect();byte [] all;all = new byte[totalLength];totalLength = 0;while(byteList.size() != 0) {System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));totalLength += byteLength.get(0);byteList.remove(0);byteLength.remove(0);}String content = new String(all, StandardCharsets.UTF_8);all = null;content = content.split("tbody")[1];String [] us = content.split("href=\"");for(int i = 1; i < us.length; i ++) {String href = us[i].split("\"", 2)[0];if(href.equals("../")) {continue;}if(href.charAt(href.length() - 1) == '/') {GetPage(after + href);} else {//下载文件，失败重试，大部分是网络原因try {GetFile(after + href);}catch (Exception e){System.out.println(after + href + " 下载失败，重试");GetFile(after + href);}}}} else {GetPage(after);}}static void GetFile(String url) throws Exception{System.out.println(url);HttpURLConnection http;http = (HttpURLConnection) (new URL(urlF + url)).openConnection();http.setRequestMethod("GET");http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");http.connect();if(http.getResponseCode() == 200) {InputStream inputStream = http.getInputStream();byte [] buffer = new byte[10240];ArrayList<byte []> byteList = new ArrayList<>();ArrayList<Integer> byteLength = new ArrayList<>();int length;int totalLength = 0;while( (length = inputStream.read(buffer)) != -1 ) {byteList.add(buffer);byteLength.add(length);totalLength += length;buffer = new byte[10240];}http.disconnect();byte [] all;all = new byte[totalLength];totalLength = 0;while(byteList.size() != 0) {System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));totalLength += byteLength.get(0);byteList.remove(0);byteLength.remove(0);}File f = new File(fileP + url.replaceAll("/", "\\\\"));//文件存在，不重复下载if(f.exists()){System.out.println(f.getAbsoluteFile() + " 存在");return;}f.createNewFile();FileOutputStream fos = new FileOutputStream(f, false);fos.write(all);fos.flush();fos.close();} else {GetFile(url);}} } - 快速入门中用到的
Element快速入门
-
Step1： 引入Vue.js文件
-
Step2： 将
element-ui目录放到Web项目核心目录（即webapp）下，然后引入element-ui的css、js文件-
引入本地Element的css、js文件
<!-- 引入样式 --> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="element-ui/lib/index.js"></script> -
引入远程Element的css、js文件
<!-- 引入样式 --> <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>
-
-
Step3： 创建Vue核心对象（详见Vue部分内容）
-
Step4： Element官网复制Element组件代码
-
基本html页面结构代码如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><!--3 从官网复制自己想要的组件代码并做对应设计更改--></div><!--1 引入vue.js文件、element的index.css文件和index.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><!-- 引入样式 --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="element-ui/lib/index.js"></script><!--2 创建Vue核心对象--><script>new Vue({el : "#app"})</script></body> </html> -
完整代码示例如下
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><!--3 从官网复制自己想要的组件代码 : 以button按钮为例--><el-row><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button><el-button type="success" round>成功按钮</el-button><el-button type="info" round>信息按钮</el-button><el-button type="warning" round>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button></el-row></div><!--1 引入vue.js文件、element的index.css文件和index.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><!-- 引入样式 --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="element-ui/lib/index.js"></script><!--2 创建Vue核心对象--><script>new Vue({el : "#app"})</script></body> </html>浏览器打开该html文件后页面如下所示
Element布局
Layout布局
-
定义：通过基础的24分栏，迅速简便的创建布局
-
解释：它会提供很多行，每行有24个基础格子
- 如上图所示
- 第一行只有一个格子，但该格子占了24个基础格子的宽度
- 第二行有两个格子，每个格子占12个基础格子的宽度
- 往下几行同理
- 如上图所示
-
步骤：
-
Step1：引入vue.js文件、element的index.css文件和index.js文件
-
Step2：创建Vue核心对象
-
Step3：从官网复制自己想要的组件代码
- 去官网找到Layout布局组件，以基础布局为例，我们发现官方给的代码中有html代码和css代码，如下
<style>标签体内的为css样式代码，我们可以将其外部引入，也可以直接写到html页面中
<el-row><el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row><el-col :span="12"><div class="grid-content bg-purple"></div></el-col><el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col> </el-row> <el-row><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> </el-row> <el-row><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col> </el-row><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>
-
-
完整代码示例
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--head标签体内放入css样式代码--><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="app"><el-row><el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row><el-col :span="12"><div class="grid-content bg-purple"></div></el-col><el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col></el-row><el-row><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col></el-row></div><!--1 引入vue.js文件、element的index.css文件和index.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><!-- 引入样式 --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="element-ui/lib/index.js"></script><!--2 创建Vue核心对象--><script>new Vue({el : "#app"})</script></body> </html>通过浏览器打开该html页面，截图如下所示
Container布局容器
-
定义：用于布局的容器组件，方便快速搭建页面的基本结构
-
解释：如上图所示，它是带有左侧导航栏的布局方式
-
步骤：
-
Step1：引入vue.js文件、element的index.css文件和index.js文件
-
Step2：创建Vue核心对象
-
Step3：从官网复制自己想要的组件代码
-
以第一个实例为例，如官网图所示
-
在该实例中除了html、css代码外，还有Vue对象的属性，如下
<script>//export default为自己创建的Vue对象export default {data() {const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(20).fill(item)}}}; </script>我们将官网实例中Vue的属性复制到自己的Vue核心对象中即可，如下
<script>new Vue({el : "#app",data() {const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(20).fill(item)}}}) </script>
-
-
-
完整代码示例
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--head标签体内放入css样式代码--><style>.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;}</style></head><body><div id="app"><el-container style="height: 500px; border: 1px solid #eee"><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>导航一</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>导航二</template><el-menu-item-group><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-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>导航三</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="3-1">选项1</el-menu-item><el-menu-item index="3-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="3-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="3-4"><template slot="title">选项4</template><el-menu-item index="3-4-1">选项4-1</el-menu-item></el-submenu></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>删除</el-dropdown-item></el-dropdown-menu></el-dropdown><span>王小虎</span></el-header><el-main><el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></el-main></el-container></el-container></div><!--1 引入vue.js文件、element的index.css文件和index.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><!-- 引入样式 --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="element-ui/lib/index.js"></script><!--2 创建Vue核心对象--><script>new Vue({el : "#app",data() {const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(20).fill(item)}}})</script></body> </html>通过浏览器打开该html页面，截图如下所示
Element案例
做出如下图所示效果
- 注意：该案例各步骤已上传到Gitee，可自行下载
Element表格组件
-
Step1： 去官网将表格对应示例复制过来（以官网带状态表格为例），代码如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--表格css样式--><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><body><div id="app"><!--3 从官网复制自己想要的组件代码--><!--表格代码--><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template></div><!--1 引入vue.js文件、element的index.css文件和index.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><!-- 引入样式 --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="element-ui/lib/index.js"></script><!--2 创建Vue核心对象--><script>new Vue({el : "#app",//表格属性methods: {tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}]}}})</script></body> </html>浏览器打开该html页面后如图所示，得到大致图后开始进行调整
-
Step2： 为Step1所得到的表格添加列及数据并修改列名
-
删除掉
width属性后每列会自动调整宽度 -
表格内容居中：在官网对应表格组件部分一直往下拉，即可找到对应方法及属性，如图所示。设置属性
align="center"
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--表格css样式--><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><body><div id="app"><!--3 从官网复制自己想要的组件代码--><!--表格代码--><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"label="排序"align="center"></el-table-column><el-table-columnprop="status"label="当前状态"align="center"></el-table-column></el-table></template></div><!--1 引入vue.js文件、element的index.css文件和index.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><!-- 引入样式 --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="element-ui/lib/index.js"></script><!--2 创建Vue核心对象--><script>new Vue({el : "#app",//表格属性methods: {tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},data() {return {tableData: [{brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}]}}})</script></body> </html>
-
-
Step3： 给表格添加操作一栏
- 操作一栏中有
修改和删除按钮，去官网找到对应按钮代码复制粘贴过来即可
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--表格css样式--><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><body><div id="app"><!--3 从官网复制自己想要的组件代码--><!--表格代码--><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"label="排序"align="center"></el-table-column><el-table-columnprop="status"label="当前状态"align="center"></el-table-column><el-table-columnlabel="操作"align="center"><el-row><el-button type="primary">修改</el-button><el-button type="danger">删除</el-button></el-row></el-table-column></el-table></template></div><!--1 引入vue.js文件、element的index.css文件和index.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><!-- 引入样式 --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="element-ui/lib/index.js"></script><!--2 创建Vue核心对象--><script>new Vue({el : "#app",//表格属性methods: {tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},data() {return {tableData: [{brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}]}}})</script></body> </html>
- 操作一栏中有
-
Step4： 给表格添加序号：在官网找到带有序号的表格，将添加序号的代码复制过来即可
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--表格css样式--><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><body><div id="app"><!--3 从官网复制自己想要的组件代码--><!--表格代码--><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><!--给表格添加序号--><el-table-columntype="index"></el-table-column><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"label="排序"align="center"></el-table-column><el-table-columnprop="status"label="当前状态"align="center"></el-table-column><el-table-columnlabel="操作"align="center"><el-row><el-button type="primary">修改</el-button><el-button type="danger">删除</el-button></el-row></el-table-column></el-table></template></div><!--1 引入vue.js文件、element的index.css文件和index.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><!-- 引入样式 --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="element-ui/lib/index.js"></script><!--2 创建Vue核心对象--><script>new Vue({el : "#app",//表格属性methods: {tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},data() {return {tableData: [{brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}]}}})</script></body> </html>
-
Step5： 表格添加复选框：找到带有复选框的表格，复制其中关于复选框的代码
-
由于在案例图中选中复选框后能对该行数据做出批量操作，所以该表格必定有一个方法，所以我们在复制关于复选框的代码时也要将带有复选框的那个表格中的对应的方法复制下来（别忘记在Vue核心对象中写入该方法），方法如下
handleSelectionChange(val) {this.multipleSelection = val; }该方法有个属性
multipleSelection，所以我们需要将该属性也复制到自己的代码中去，最终完整代码如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--表格css样式--><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><body><div id="app"><!--3 从官网复制自己想要的组件代码--><!--表格代码--><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"@selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法--><!--给表格添加复选框--><el-table-columntype="selection"></el-table-column><!--给表格添加序号--><el-table-columntype="index"></el-table-column><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"label="排序"align="center"></el-table-column><el-table-columnprop="status"label="当前状态"align="center"></el-table-column><el-table-columnlabel="操作"align="center"><el-row><el-button type="primary">修改</el-button><el-button type="danger">删除</el-button></el-row></el-table-column></el-table></template></div><!--1 引入vue.js文件、element的index.css文件和index.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><!-- 引入样式 --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="element-ui/lib/index.js"></script><!--2 创建Vue核心对象--><script>new Vue({el : "#app",//表格属性methods: {tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';},// 复选框选中后执行的方法handleSelectionChange(val) {this.multipleSelection = val;}},data() {return {multipleSelection: [],tableData: [{brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}]}}})</script></body> </html>
-
将复选框的方法添加输出，测试看是否成功，代码如下
handleSelectionChange(val) {this.multipleSelection = val;console.log(this.multipleSelection) }浏览器打开该页面后，打开开发者工具→选中Console控制器，即可查看输出，如图所示
-
Element表单组件
-
Step6： 添加表单：案例图中表单是横排的，所以我们在官网找到相似表单(即行内表单)复制代码，代码如下
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--表格css样式--><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><body><div id="app"><!--3 从官网复制自己想要的组件代码--><!--表单代码--><el-form :inline="true" :model="formInline" class="demo-form-inline"><el-form-item label="审批人"><el-input v-model="formInline.user" placeholder="审批人"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="formInline.region" placeholder="活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!--表格代码--><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"@selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法--><!--给表格添加复选框--><el-table-columntype="selection"></el-table-column><!--给表格添加序号--><el-table-columntype="index"></el-table-column><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"label="排序"align="center"></el-table-column><el-table-columnprop="status"label="当前状态"align="center"></el-table-column><el-table-columnlabel="操作"align="center"><el-row><el-button type="primary">修改</el-button><el-button type="danger">删除</el-button></el-row></el-table-column></el-table></template></div><!--1 引入vue.js文件、element的index.css文件和index.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><!-- 引入样式 --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="element-ui/lib/index.js"></script><!--2 创建Vue核心对象--><script>new Vue({el : "#app",//表格属性methods: {// 表单方法onSubmit() {console.log('submit!');},// 复选框选中后执行的方法handleSelectionChange(val) {this.multipleSelection = val;//测试与复选框关联的方法是否成功，测试完成后自行删除即可console.log(this.multipleSelection)},// 表格方法tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},data() {return {// 表单数据formInline: {user: '',region: ''},// 复选框数据multipleSelection: [],// 表格数据tableData: [{brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}]}}})</script></body> </html>
-
Step7： 将表单修改成与案例图一致，代码如下
- 修改表单名称时，要注意将v-model属性值以及Vue对象中的属性值都修改为对应名称
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--表格css样式--><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><body><div id="app"><!--3 从官网复制自己想要的组件代码--><!--表单代码--><el-form :inline="true" :model="brand" class="demo-form-inline"><el-form-item label="当前状态"><el-select v-model="brand.status" placeholder="当前状态"><el-option label="1" value="启用"></el-option><el-option label="0" value="禁用"></el-option></el-select></el-form-item><el-form-item label="企业名称"><el-input v-model="brand.companyName" placeholder="企业名称"></el-input></el-form-item><el-form-item label="品牌名称"><el-input v-model="brand.brandName" placeholder="品牌名称"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!--表格代码--><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"@selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法--><!--给表格添加复选框--><el-table-columntype="selection"></el-table-column><!--给表格添加序号--><el-table-columntype="index"></el-table-column><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"label="排序"align="center"></el-table-column><el-table-columnprop="status"label="当前状态"align="center"></el-table-column><el-table-columnlabel="操作"align="center"><el-row><el-button type="primary">修改</el-button><el-button type="danger">删除</el-button></el-row></el-table-column></el-table></template></div><!--1 引入vue.js文件、element的index.css文件和index.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><!-- 引入样式 --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="element-ui/lib/index.js"></script><!--2 创建Vue核心对象--><script>new Vue({el : "#app",//表格属性methods: {// 表单方法onSubmit() {console.log(this.brand);},// 复选框选中后执行的方法handleSelectionChange(val) {this.multipleSelection = val;//测试与复选框关联的方法是否成功，测试完成后自行删除即可console.log(this.multipleSelection)},// 表格方法tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},data() {return {// 表单数据brand: {status: '',companyName: '',brandName: ''},// 复选框数据multipleSelection: [],// 表格数据tableData: [{brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}]}}})</script></body> </html>
Element对话框和表单
对话框和表单是通过单击新增按钮弹出来的，所以我们在做对话框和表单之前要先添加批量删除和新增两个按钮
-
Step8： 添加
批量删除和新增按钮，添加对话框在官网找到对话框组件，此处以对话框的一个基本用法为例，复制其代码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--表格css样式--><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><body><div id="app"><!--3 从官网复制自己想要的组件代码--><!--表单代码--><el-form :inline="true" :model="brand" class="demo-form-inline"><el-form-item label="当前状态"><el-select v-model="brand.status" placeholder="当前状态"><el-option label="1" value="启用"></el-option><el-option label="0" value="禁用"></el-option></el-select></el-form-item><el-form-item label="企业名称"><el-input v-model="brand.companyName" placeholder="企业名称"></el-input></el-form-item><el-form-item label="品牌名称"><el-input v-model="brand.brandName" placeholder="品牌名称"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!--批量删除和新增按钮--><el-row><el-button type="danger" plain>批量删除</el-button><el-button type="primary">新增</el-button></el-row><!--要弹出的对话框--><el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性--><!--对话框中的表单--><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog><!--表格代码--><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"@selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法--><!--给表格添加复选框--><el-table-columntype="selection"></el-table-column><!--给表格添加序号--><el-table-columntype="index"></el-table-column><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"label="排序"align="center"></el-table-column><el-table-columnprop="status"label="当前状态"align="center"></el-table-column><el-table-columnlabel="操作"align="center"><el-row><el-button type="primary">修改</el-button><el-button type="danger">删除</el-button></el-row></el-table-column></el-table></template></div><!--1 引入vue.js文件、element的index.css文件和index.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><!-- 引入样式 --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="element-ui/lib/index.js"></script><!--2 创建Vue核心对象--><script>new Vue({el : "#app",//表格属性methods: {// 表单方法onSubmit() {// 测试是否绑定成功：输出到浏览器控制台测试是否将表单数据封装到brand对象中console.log(this.brand);},// 单击对话框右上角x时会弹出的确认关闭框，若不想要将其删除即可handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});},// 复选框选中后执行的方法handleSelectionChange(val) {this.multipleSelection = val;//测试与复选框关联的方法是否成功，测试完成后自行删除即可console.log(this.multipleSelection)},// 表格方法tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},data() {return {// 表单数据brand: {status: '',companyName: '',brandName: ''},// 添加数据的对话康初始状态太是否展示dialogVisible: false,// 复选框数据multipleSelection: [],// 表格数据tableData: [{brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}]}}})</script></body> </html>
-
Step9： 在对话框中添加表单，代码如下
- 在官网找到表单组件进行修改
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--表格css样式--><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><body><div id="app"><!--3 从官网复制自己想要的组件代码--><!--表单代码--><el-form :inline="true" :model="brand" class="demo-form-inline"><el-form-item label="当前状态"><el-select v-model="brand.status" placeholder="当前状态"><el-option label="1" value="启用"></el-option><el-option label="0" value="禁用"></el-option></el-select></el-form-item><el-form-item label="企业名称"><el-input v-model="brand.companyName" placeholder="企业名称"></el-input></el-form-item><el-form-item label="品牌名称"><el-input v-model="brand.brandName" placeholder="品牌名称"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!--批量删除和新增按钮--><el-row><el-button type="danger" plain>批量删除</el-button><el-button type="primary">新增</el-button></el-row><!--要弹出的对话框--><!--单击事件发生后会将dialogVisible属性值设置为true，此时对话框就会打开--><el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialogtitle="编辑品牌":visible.sync="dialogVisible"width="30%":before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性--><!--对话框中的表单--><el-form ref="form" :model="form" label-width="80px"><el-form-item label="品牌名称"><el-input v-model="form.brandName"></el-input></el-form-item><el-form-item label="企业名称"><el-input v-model="form.companyName"></el-input></el-form-item><el-form-item label="排序"><el-input v-model="form.ordered"></el-input></el-form-item><el-form-item label="备注"><el-input type="textarea" v-model="form.description"></el-input></el-form-item><el-form-item label="状态"><el-switch v-model="form.status"></el-switch></el-form-item><el-form-item><el-button type="primary" @click="addBrand">提交</el-button><el-button>取消</el-button></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog><!--表格代码--><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"@selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法--><!--给表格添加复选框--><el-table-columntype="selection"></el-table-column><!--给表格添加序号--><el-table-columntype="index"></el-table-column><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"label="排序"align="center"></el-table-column><el-table-columnprop="status"label="当前状态"align="center"></el-table-column><el-table-columnlabel="操作"align="center"><el-row><el-button type="primary">修改</el-button><el-button type="danger">删除</el-button></el-row></el-table-column></el-table></template></div><!--1 引入vue.js文件、element的index.css文件和index.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><!-- 引入样式 --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="element-ui/lib/index.js"></script><!--2 创建Vue核心对象--><script>new Vue({el : "#app",//表格属性methods: {// 表单方法onSubmit() {// 测试是否绑定成功：输出到浏览器控制台测试是否将表单数据封装到brand对象中console.log(this.brand);},// 单击对话框右上角x时会弹出的确认关闭框，若不想要将其删除即可handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});},//弹出的对话康中表单的添加方法addBrand() {},// 复选框选中后执行的方法handleSelectionChange(val) {this.multipleSelection = val;//测试与复选框关联的方法是否成功，测试完成后自行删除即可console.log(this.multipleSelection)},// 表格方法tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},data() {return {// 表单数据brand: {status: '',companyName: '',brandName: ''},// 新增按钮弹出的对话框初始状态是否展示的标记，默认为falsedialogVisible: false,form: {brandName: '',companyName: '',ordered: '',description: '',status: false},// 复选框数据multipleSelection: [],// 表格数据tableData: [{brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}]}}})</script></body> </html>
-
Step10： 步骤如下，代码如下
- 给
新增按钮绑定单击事件，只要一单击新增按钮就弹出对话框表单 - 更改表单自带的
提交按钮绑定的单击事件对应的方法：将方法改为addBrand，只要单击该按钮，对话框表单就自动提交。 - 将对话框自带的
确定、取消按钮删除 - 给表单自带的
取消按钮绑定单击事件，只要单击该按钮，对话框表单就消失 - 表单绑定的模型为
form（即model="form"），将其属性值改为brand，并将brand对象中的数据补齐 - 将状态开关设置为0或1：官网找到对应开关组件，然后根据对应属性将属性值设为0、1
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--表格css样式--><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><body><div id="app"><!--3 从官网复制自己想要的组件代码--><!--表单代码--><el-form :inline="true" :model="brand" class="demo-form-inline"><el-form-item label="当前状态"><el-select v-model="brand.status" placeholder="当前状态"><el-option label="1" value="启用"></el-option><el-option label="0" value="禁用"></el-option></el-select></el-form-item><el-form-item label="企业名称"><el-input v-model="brand.companyName" placeholder="企业名称"></el-input></el-form-item><el-form-item label="品牌名称"><el-input v-model="brand.brandName" placeholder="品牌名称"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!--批量删除和新增按钮--><el-row><el-button type="danger" plain>批量删除</el-button><!--新增按钮绑定单击事件：只要一单击`新增`按钮就弹出对话框表单--><el-button type="primary" plain @click="dialogVisible = true">新增</el-button></el-row><!--要弹出的对话框--><!--单击事件发生后会将dialogVisible属性值设置为true，此时对话框就会打开--><el-dialogtitle="编辑品牌":visible.sync="dialogVisible"width="30%":before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性--><!--对话框中的表单--><el-form ref="form" :model="brand" label-width="80px"><el-form-item label="品牌名称"><el-input v-model="brand.brandName"></el-input></el-form-item><el-form-item label="企业名称"><el-input v-model="brand.companyName"></el-input></el-form-item><el-form-item label="排序"><el-input v-model="brand.ordered"></el-input></el-form-item><el-form-item label="备注"><el-input type="textarea" v-model="brand.description"></el-input></el-form-item><el-form-item label="状态"><!--将状态开关值设为1、0--><el-switch v-model="brand.status" active-value="1" inactive-value="0"></el-switch></el-form-item><el-form-item><el-button type="primary" @click="addBrand">提交</el-button><el-button @click="dialogVisible = false">取消</el-button></el-form-item></el-form></el-dialog><!--表格代码--><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"@selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法--><!--给表格添加复选框--><el-table-columntype="selection"></el-table-column><!--给表格添加序号--><el-table-columntype="index"></el-table-column><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"label="排序"align="center"></el-table-column><el-table-columnprop="status"label="当前状态"align="center"></el-table-column><el-table-columnlabel="操作"align="center"><el-row><el-button type="primary">修改</el-button><el-button type="danger">删除</el-button></el-row></el-table-column></el-table></template></div><!--1 引入vue.js文件、element的index.css文件和index.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><!-- 引入样式 --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="element-ui/lib/index.js"></script><!--2 创建Vue核心对象--><script>new Vue({el : "#app",//表格属性methods: {// 表单方法onSubmit() {// 测试是否绑定成功：输出到浏览器控制台测试是否将表单数据封装到brand对象中console.log(this.brand);},// 单击对话框右上角x时会弹出的确认关闭框，若不想要将其删除即可handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});},//弹出的对话框中单击提交按钮后表单的添加方法addBrand() {console.log(this.brand);},// 复选框选中后执行的方法handleSelectionChange(val) {this.multipleSelection = val;//测试与复选框关联的方法是否成功，测试完成后自行删除即可console.log(this.multipleSelection)},// 表格方法tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},data() {return {// 品牌模型数据brand: {id: '',brandName: '',companyName: '',status: '',ordered: '',description: ''},// 新增按钮弹出的对话框初始状态是否展示的标记，默认为falsedialogVisible: false,form: {brandName: '',companyName: '',ordered: '',description: '',status: false},// 复选框数据multipleSelection: [],// 表格数据tableData: [{brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}]}}})</script></body> </html>
- 给
Element分页工具条
-
Step11： 去官网找到分页组件，并复制对应代码并做相应修改，代码如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--表格css样式--><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}</style></head><body><div id="app"><!--3 从官网复制自己想要的组件代码--><!--表单代码--><el-form :inline="true" :model="brand" class="demo-form-inline"><el-form-item label="当前状态"><el-select v-model="brand.status" placeholder="当前状态"><el-option label="1" value="启用"></el-option><el-option label="0" value="禁用"></el-option></el-select></el-form-item><el-form-item label="企业名称"><el-input v-model="brand.companyName" placeholder="企业名称"></el-input></el-form-item><el-form-item label="品牌名称"><el-input v-model="brand.brandName" placeholder="品牌名称"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><!--批量删除和新增按钮--><el-row><el-button type="danger" plain>批量删除</el-button><!--新增按钮绑定单击事件：只要一单击`新增`按钮就弹出对话框表单--><el-button type="primary" plain @click="dialogVisible = true">新增</el-button></el-row><!--要弹出的对话框--><!--单击事件发生后会将dialogVisible属性值设置为true，此时对话框就会打开--><el-dialogtitle="编辑品牌":visible.sync="dialogVisible"width="30%":before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性--><!--对话框中的表单--><el-form ref="form" :model="brand" label-width="80px"><el-form-item label="品牌名称"><el-input v-model="brand.brandName"></el-input></el-form-item><el-form-item label="企业名称"><el-input v-model="brand.companyName"></el-input></el-form-item><el-form-item label="排序"><el-input v-model="brand.ordered"></el-input></el-form-item><el-form-item label="备注"><el-input type="textarea" v-model="brand.description"></el-input></el-form-item><el-form-item label="状态"><!--将状态开关值设为1、0--><el-switch v-model="brand.status" active-value="1" inactive-value="0"></el-switch></el-form-item><el-form-item><el-button type="primary" @click="addBrand">提交</el-button><el-button @click="dialogVisible = false">取消</el-button></el-form-item></el-form></el-dialog><!--表格代码--><template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"@selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法--><!--给表格添加复选框--><el-table-columntype="selection"></el-table-column><!--给表格添加序号--><el-table-columntype="index"></el-table-column><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"label="排序"align="center"></el-table-column><el-table-columnprop="status"label="当前状态"align="center"></el-table-column><el-table-columnlabel="操作"align="center"><el-row><el-button type="primary">修改</el-button><el-button type="danger">删除</el-button></el-row></el-table-column></el-table></template><!--分页代码--><template><div class="block"><!--current-page 当前所在页page-sizes 定义选择每页显示的条数page-size 每页显示的条目数total 设置总共的页面数background 添加背景色--><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[10, 20, 30, 40]":page-size="10"backgroundlayout="total, sizes, prev, pager, next, jumper":total="1000"></el-pagination></div></template></div><!--1 引入vue.js文件、element的index.css文件和index.js文件--><script src="js/vue.js" type="text/javascript" charset="UTF-8"></script><!-- 引入样式 --><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="element-ui/lib/index.js"></script><!--2 创建Vue核心对象--><script>new Vue({el : "#app",//表格属性methods: {// 表单方法onSubmit() {// 测试是否绑定成功：输出到浏览器控制台测试是否将表单数据封装到brand对象中console.log(this.brand);},// 单击对话框右上角x时会弹出的确认关闭框，若不想要将其删除即可handleClose(done) {this.$confirm('确认关闭？').then(_ => {done();}).catch(_ => {});},//弹出的对话框中单击提交按钮后表单的添加方法addBrand() {console.log(this.brand);},// 复选框选中后执行的方法handleSelectionChange(val) {this.multipleSelection = val;//测试与复选框关联的方法是否成功，测试完成后自行删除即可console.log(this.multipleSelection)},// 表格方法tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';},// 分页方法handleSizeChange(val) {console.log(`每页 ${val} 条`);},// 分页方法handleCurrentChange(val) {console.log(`当前页: ${val}`);}},data() {return {// 品牌模型数据brand: {id: '',brandName: '',companyName: '',status: '',ordered: '',description: ''},// 新增按钮弹出的对话框初始状态是否展示的标记，默认为falsedialogVisible: false,form: {brandName: '',companyName: '',ordered: '',description: '',status: false},// 复选框数据multipleSelection: [],// 表格数据tableData: [{brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}, {brandName: '小米',companyName: '小米科技有限公司',ordered: '10',status: '启用'}],// 分页数据：当前所在页currentPage: 4}}})</script></body> </html>