プライベートな連絡先の最初の情報
送料メール:
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
意味
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）の考え方に基づいており、データを実現できます双方向バインディング 、データに重点を置いたプログラミング
自分でもできる公式ウェブサイト勉強
新しい HTML ページを作成してインポートするVue.js書類
ローカル Vue ファイルを導入する場合 (ブロガーは VUE2 の最後のバージョンを使用します)。Vue2.7.16开发环境、公式 Web サイトにアクセスして、対応するファイルをダウンロードできます。js書類）
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
リモートnpmパッケージで提供されるVueサービスを導入する場合
開発環境
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
本番環境
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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アプリの場合、対応する 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 ページを開いた後の実行中のスクリーンショットは次のとおりです。
| 命令 | 効果 |
|---|---|
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-modelv-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-onv-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-showv-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 非表示の原則は対応するタグを追加することですdisplay css 属性を指定し、属性値を次のように設定します。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-forv-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>
| 州 | ステージサイクル |
|---|---|
beforeCreate | 作成前 |
created | 作成後 |
beforeMount | ロードする前に |
mounted | 取り付け完了 |
beforeUpdate | アップデート前 |
updated | 更新しました |
beforeDestroy | 破壊の前に |
destroyed | 破壊後 |
Vue のライフサイクルには 8 つの段階があります
各ライフサイクルの位置づけは以下の通り
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>
VueDemo、Gitee にアップロードされており、自分でダウンロードする
brand.html変更点は以下の通りです
brand.htmlコードの変更は次のとおりです。
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.data
JavaScriptで
thisキーワードの動作は、キーワードが呼び出されるコンテキストによって異なります。 Vueのインスタンスメソッドでは、thisVue インスタンス自体を指します。しかしアクシオスではthenメソッドのコールバック関数では、this他のオブジェクト、通常はグローバル オブジェクト (ブラウザではこれはwindow物体）。これにより、Vue インスタンスのプロパティとメソッドに正しくアクセスできなくなります。定義により
var _this = this、Vue インスタンスのthisに保存します_this変数を取得してコールバック関数で使用します_thisVue インスタンスを正しく参照するには、
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書類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 获取响应数据并判断响应数据是否为success
if(resp.data == "success"){
location.href = "http://localhost:8080/VueDemo/brand.html";
}
})
}
}
})
</script>
</body>
</html>
Tomcat が Web プロジェクトを実行した後の実行中のスクリーンショットは次のとおりです。
意味
知らせ：
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/";
//url
static String urlP = "https://unpkg.com/browse/[email protected]/";
static String urlF = "https://unpkg.com/[email protected]/";
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);
}
}
}
ステップ1： Vue.jsファイルを導入する
ステップ2： 意思element-uiディレクトリは Web プロジェクト (つまり、webapp) のコア ディレクトリの下に配置され、インポートされます。element-uicss、jsファイル
ローカル要素の css および js ファイルを導入する
<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
リモート要素の 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>
ステップ3： Vue コア オブジェクトを作成します (詳細については、「Vue」セクションを参照)
ステップ4： 要素公式ウェブサイト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 ファイルを開くと、ページは次のように表示されます。
定義: 基本的な 24 列のレイアウトを迅速かつ簡単に作成します。
説明: 多くの行が提供され、各行には 24 個の基本グリッドがあります。
ステップ：
ステップ1: vue.jsファイル、要素のindex.cssファイル、index.jsファイルを導入する
ステップ 2: Vue コア オブジェクトを作成する
ステップ3: 公式Webサイトから必要なコンポーネントコードをコピーします
<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 ページを開くと、スクリーンショットは次のようになります。
定義: ページの基本構造を迅速に構築するためのレイアウトに使用されるコンテナ コンポーネント
説明: 上の図に示すように、左側にナビゲーション バーがあるレイアウトです。
ステップ：
ステップ1: vue.jsファイル、要素のindex.cssファイル、index.jsファイルを導入する
ステップ 2: Vue コア オブジェクトを作成する
ステップ3: 公式Webサイトから必要なコンポーネントコードをコピーします
公式ウェブサイトの写真に示されているように、最初のインスタンスを例に挙げます。
この例では、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>
次のように、公式 Web サイトのインスタンスにある 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 ページを開くと、スクリーンショットは次のようになります。
以下のようにエフェクトを作ります
ステップ1： 公式 Web サイトにアクセスし、対応するフォームの例をコピーします (ステータスフォームのある公式ウェブサイトたとえば)、コードは次のとおりです。
<!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-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="地址">
</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ページが開き、大まかなイメージを掴んでから調整を開始します。
ステップ2： 手順1で取得したテーブルに列とデータを追加し、列名を変更します。
消去width各列は、属性の後で幅を自動的に調整します。
テーブルのコンテンツを中央に配置します。図に示すように、公式 Web サイトの対応するテーブル コンポーネント セクションを下にスクロールして、対応するメソッドとプロパティを見つけます。プロパティを設定する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-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="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>
ステップ3： テーブルにアクション列を追加する
修改そして删除ボタン、公式 Web サイトにアクセスして対応するボタン コードを見つけ、コピーして貼り付けます。<!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-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
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>
ステップ4： テーブルにシリアル番号を追加する: 公式 Web サイトでシリアル番号が記載されたテーブルを見つけ、シリアル番号を追加するためのコードをコピーします。
<!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-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
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>
ステップ5： テーブルにチェックボックスを追加する: チェックボックスのあるテーブルを見つけて、チェックボックスのコードをコピーします。
ケース図でチェック ボックスをオンにした後、データ行に対してバッチ操作を実行できるため、テーブルにはメソッドが必要です。そのため、チェック ボックスに関するコードをコピーするときは、チェック ボックスのコピーが付いているテーブルもコピーする必要があります。の対応するメソッド (このメソッドを 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-column
type="selection">
</el-table-column>
<!--给表格添加序号-->
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
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)
}
ブラウザでページを開いた後、図に示すように、開発者ツールを開き、コンソール コントローラーを選択して出力を表示します。
ステップ6： フォームを追加する: ケース図のフォームは横型なので、公式 Web サイトで同様のフォーム (つまり、インライン フォーム) を見つけて、コードをコピーします。 コードは次のとおりです。
<!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-column
type="selection">
</el-table-column>
<!--给表格添加序号-->
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
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>
ステップ7： ケース図と一致するようにフォームを変更します。コードは次のとおりです。
<!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-column
type="selection">
</el-table-column>
<!--给表格添加序号-->
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
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>
「追加」ボタンをクリックするとダイアログボックスやフォームが表示されるので、ダイアログボックスやフォームを作成する前に追加する必要があります。批量删除そして新增2つのボタン
ステップ8： に追加批量删除そして新增ボタン、ダイアログを追加
公式 Web サイトでダイアログ ボックス コンポーネントを見つけて、ここでは例としてダイアログ ボックスの基本的な使用法を取り上げ、そのコードをコピーします。
<!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-dialog
title="提示"
: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-column
type="selection">
</el-table-column>
<!--给表格添加序号-->
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
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>
ステップ9： ダイアログ ボックスにフォームを追加します。コードは次のとおりです。
<!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-dialog
title="编辑品牌"
: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-column
type="selection">
</el-table-column>
<!--给表格添加序号-->
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
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: ''
},
// 新增按钮弹出的对话框初始状态是否展示的标记，默认为false
dialogVisible: 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>
ステップ10： 手順は次のとおりで、コードは次のとおりです
新增ボタン バインディング クリック イベント (1 回のクリックの間)新增ボタンをクリックするとダイアログ フォームがポップアップ表示されます提交ボタンにバインドされたクリック イベントに対応するメソッド: メソッドを次のように変更します。addBrand, ボタンをクリックしている限り、ダイアログ フォームは自動的に送信されます。确定、取消ボタン削除取消ボタンはクリック イベントにバインドされており、ボタンをクリックしている間はダイアログ フォームが消えます。form（今すぐmodel="form")、その属性値を次のように変更します。brand、ブランド オブジェクト内のデータを完成させます<!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-dialog
title="编辑品牌"
: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-column
type="selection">
</el-table-column>
<!--给表格添加序号-->
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
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: ''
},
// 新增按钮弹出的对话框初始状态是否展示的标记，默认为false
dialogVisible: 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>
ステップ11： 公式 Web サイトにアクセスしてページング コンポーネントを見つけ、対応するコードをコピーして、対応する変更を加えます。コードは次のとおりです。
<!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-dialog
title="编辑品牌"
: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-column
type="selection">
</el-table-column>
<!--给表格添加序号-->
<el-table-column
type="index">
</el-table-column>
<el-table-column
prop="brandName"
label="品牌名称"
align="center">
</el-table-column>
<el-table-column
prop="companyName"
label="企业名称"
align="center">
</el-table-column>
<el-table-column
prop="ordered"
label="排序"
align="center">
</el-table-column>
<el-table-column
prop="status"
label="当前状态"
align="center">
</el-table-column>
<el-table-column
label="操作"
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"
background
layout="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: ''
},
// 新增按钮弹出的对话框初始状态是否展示的标记，默认为false
dialogVisible: 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>
彼は 30 年以上テクノロジーの研究に専念しており、Java、Linux、JavaScript、PHP、CSS などのさまざまな言語に堪能であり、オープンソース分野で多くの貢献を行っています。将来の参考のために技術開発におけるいくつかの問題を共有する開発者ドキュメント ステーション。
送料メール: