Data Besar------JavaWeb------Vue

2024-07-12

Pemandangan

definisi
- Vue adalah kerangka front-end yang dapat menghilangkan operasi DOM dalam JavaScript asli dan menyederhanakan penulisan.
  - Framework MyBatis yang saya pelajari sebelumnya digunakan untuk menyederhanakan penulisan kode JDBC; sedangkan Vue adalah framework front-end yang digunakan untuk menyederhanakan penulisan kode JavaScript.
  - Menambahkan kasus komprehensif di Axios dan JSONAda banyak sekali operasi DOM di , contohnya sebagai berikut:
```
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;
1
2
3
4
5
6
7
8
9
10
11
```
- Hal ini didasarkan pada ide MVVM (Model-View-ViewModel) dan dapat mewujudkan dataPengikatan dua arah , fokuskan pemrograman pada data
  - Catatan: Pola MVC yang dipelajari sebelumnya hanya dapat mencapai tampilan satu arah dari model ke tampilan, dan tidak dapat mengikat tampilan dan model satu sama lain (yaitu, selama salah satu model dan tampilan berubah, yang lain juga akan berubah). mengubah)
- Anda bisa melakukannya sendiriSitus web resmibelajar

Mulai Cepat dengan Vue

Buat halaman Html baru dan imporVue.jsdokumen
- Jika Anda memasukkan file Vue lokal (blogger menggunakan VUE2 versi terakhir:Vue2.7.16开发环境, Anda dapat mengunjungi situs web resmi untuk mengunduh yang sesuaijsdokumen)
```
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
1
```
- Jika Anda memperkenalkan layanan Vue yang disediakan oleh paket npm jarak jauh
  - pengembangan lingkungan
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
1
```
  - Lingkungan produksi
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
1
```

Di area kode JS (in<Script>tag body), membuat objek inti Vue untuk pengikatan data

Saat membuat objek Vue, Anda perlu meneruskan objek js, dan properti berikut diperlukan dalam objek tersebut:

Atribut	menjelaskan
`el`	Tentukan tag mana yang dikelola oleh Vue. Nilai atribut ini`#app` tengah`app` Untuk tag yang dikelola oleh Vue`id`nilai atribut
`data`	digunakan untuk mendefinisikan tipe data
`methods`	Fungsi yang digunakan untuk definisi, nilai fungsi dapat dikembalikan dengan pengembalian

new Vue({
    el:"#app",
    data() {
        return {
            username : ""
        }
    }
});
1
2
3
4
5
6
7
8

Tampilan penulisan (kode HTML)
- Dalam contoh berikutdivBerlabelidUntuk aplikasi, objek Vue yang sesuai akan dibuat.elnilai atribut
- <input>Label membuat kotak masukan denganv-modelProperti untuk mengikat kotak input ke model Vue secara dua arah
  - di dalamv-modelNilai atributnya sesuai dengan objek Vue yang dibuat.returnNama model dalam tanda kurung konsisten
- {{}}Ini didefinisikan di Vue ekspresi interpolasi , digunakan untuk mendapatkan data dalam model
```
<div id="app">
    <input name="username" v-model="username">
    {{username}}
</div>
1
2
3
4
```

Kode file vueDemo1.html selengkapnya adalah sebagai berikut

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

Setelah browser membuka halaman html, screenshot yang berjalan adalah sebagai berikut

Masukkan deskripsi gambar di sini

arahan Vue

petunjuk	memengaruhi
`v-bind`	Ikat nilai atribut ke tag HTML, seperti setting `href` , `css`gaya dll.
`v-model`	Buat pengikatan data dua arah pada elemen formulir
`v-on`	Ikat acara ke tag HTML
`v-if`	Merender suatu elemen secara kondisional, ditentukan sebagai`true`Render bila diperlukan, jika tidak, jangan render
`v-else`	Merender suatu elemen secara kondisional, ditentukan sebagai`true`Render bila diperlukan, jika tidak, jangan render
`v-else-if`	Merender suatu elemen secara kondisional, ditentukan sebagai`true`Render bila diperlukan, jika tidak, jangan render
`v-show`	Menampilkan elemen berdasarkan kondisi. Bedanya, yang diaktifkan adalah`display`nilai atribut
`v-for`	Rendering daftar, melintasi elemen wadah atau properti objek

definisi:HtmlDiberi label denganv-Sifat khusus dari awalan, instruksi yang berbeda memiliki arti yang berbeda.

`v-bind`、`v-model`

v-bind: Mengikat nilai atribut ke tag HTML, seperti setting href , cssgaya dll.
- Contohnya adalah sebagai berikut:
```
<a v-bind:href="url">百度一下</a>
1
```
- dapat disingkat menjadi
```
<a :href="url">百度一下</a>
1
```
  Di masa depan, selama URL-nya berubah, akan sesuaiv-bindNilai atribut juga akan langsung berubah.
v-model:Membuat pengikatan data dua arah pada elemen formulir
- Contohnya adalah sebagai berikut
```
<input name="username" v-model="username"> 
1
```

Contoh lengkapnya adalah sebagai berikut

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

Masukkan deskripsi gambar di sini

`v-on`

v-on: Mengikat acara ke tag Html
Contoh: Suatu peristiwa terikat pada klik tombol dan peristiwa tersebut dijalankanshow()metode, yang tertulis dimethodssecara alami
- Terlepas dari bentuk lengkapnya atau bentuk singkatannya, jika kejadian terikat adalah sebuah metode, metode tersebut dapat menghilangkan tanda kurung.
- Bentuk lengkapnya adalah sebagai berikut
```
<input type="button" value="按钮" v-on:click="show()">

<input type="button" value="按钮" v-on:click="show">
1
2
3
```
- Bentuk singkatannya adalah sebagai berikut
```
<input type="button" value="按钮" @click="show()">

<input type="button" value="按钮" @click="show">
1
2
3
```

Contoh kode lengkapnya adalah sebagai berikut:

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Setelah membuka halaman html melalui browser, screenshot yang berjalan adalah sebagai berikut:

Masukkan deskripsi gambar di sini

`v-if`、`v-show`

v-if、v-else、v-else-if: Merender suatu elemen secara kondisional, merendernya ketika elemen tersebut dipastikan benar, jika tidak, jangan merendernya.

Digunakan bersama-sama mereka setara denganif-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>
1
2
3

Contoh kode lengkapnya adalah sebagai berikut

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Setelah browser membuka halaman html, screenshotnya seperti berikut:

Masukkan deskripsi gambar di sini

v-show: Menampilkan elemen berdasarkan kondisi
- v-show Danv-if Efeknya sama, tetapi prinsip pelaksanaannya berbeda:v-show Prinsip tidak ditampilkan adalah menambahkan tag yang sesuaidisplay atribut css dan atur nilai atribut menjadinone,Danv-ifSecara langsung tidakdivTag akan muncul di kode sumber hanya jika kondisinya terpenuhi.div Label.Untuk lebih jelasnya lihat screenshot contoh kode lengkapnya.
```
<div v-show="count == 3">div4</div>
1
```

Contoh kode lengkapnya adalah sebagai berikut

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

Browser membuka file html dan screenshot yang berjalan adalah sebagai berikut:

Masukkan deskripsi gambar di sini

`v-for`

v-for: Daftar rendering, melintasi elemen wadah atau properti objek

Lintasi array dengan cara biasa

<div v-for="addr in addrs">
    {{addr}}<br>
</div>
1
2
3

Lintasi array berdasarkan indeks

<div v-for="(addr,i) in addrs">
    {{i+1}}：{{addr}}<br>
</div>
1
2
3

contoh kode

Lintasi array dengan cara biasa

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Masukkan deskripsi gambar di sini

Lintasi array berdasarkan indeks

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Masukkan deskripsi gambar di sini

Siklus hidup Vue

negara	siklus panggung
`beforeCreate`	Sebelum penciptaan
`created`	Setelah penciptaan
`beforeMount`	sebelum memuat
`mounted`	Pemasangan selesai
`beforeUpdate`	Sebelum pembaruan
`updated`	Diperbarui
`beforeDestroy`	sebelum kehancuran
`destroyed`	Setelah kehancuran

Ada delapan tahapan dalam siklus hidup Vue
- Setiap kali peristiwa siklus hidup dipicu, ametode siklus hidup (juga disebut metode kait)
Berikut posisi masing-masing siklus hidup
mounted: Pemasangan selesai, inisialisasi Vue berhasil, rendering halaman Html berhasil
- Kita dapat mengirimkan permintaan asinkron dalam metode ini untuk memuat data
- Contoh sederhana
```
new Vue({
    el:"#app",
    mounted() {
      alert("Vue挂载完毕，发送异步请求")  
    }
});
1
2
3
4
5
6
```

Contoh kode lengkap

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

Kasus Vue

Sasaran: Gunakan Vue untuk menyederhanakan kueri merek dan menambahkan fungsi
Kasus ini dimulai denganKasus komprehensif Axios dan JSONBerdasarkan hal tersebut, proyek ini disebut:VueDemo, sudah diupload ke Gitee, dan bisaUnduh sendiri

Cari semua

Masukkan deskripsi gambar di sini

brand.htmlPerubahan yang dilakukan adalah sebagai berikut

brand.htmlPerubahan kodenya adalah sebagai berikut:

Perkenalkan file vue.js
Buat objek inti Vue untuk pengikatan data
menggunakanmountedMetode ini mengirimkan permintaan asinkron dan menanyakan data setelah halaman dimuat.

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

Tangkapan layar setelah Tomcat menjalankan proyek web adalah sebagai berikut

Masukkan deskripsi gambar di sini

pertanyaan
- kenapa harusvar _this = this, kenapa tidak secara langsungthis.brands=resp.data
  
  dalam JavaScript this Perilaku kata kunci bergantung pada konteks pemanggilannya. Dalam metode contoh Vue,this Menunjuk ke instance Vue itu sendiri.Tapi di Aksiosthen Dalam fungsi panggilan balik metode ini,this Dapat menunjuk ke objek lain, biasanya objek global (di browser ini adalahwindow obyek). Hal ini akan menyebabkan Anda tidak dapat mengakses properti dan metode instance Vue dengan benar.
  
  Menurut definisi var _this = this, Anda akan menggunakan instance Vue this simpan di_this variabel dan kemudian menggunakannya dalam fungsi panggilan balik_this untuk mereferensikan instance Vue dengan benar.

Tambahkan

Masukkan deskripsi gambar di sini

addbrand.htmlPerubahan yang dilakukan adalah sebagai berikut

brand.htmlPerubahan kodenya adalah sebagai berikut:

Buat tombol baru dan ikat acara klik ke dalamnya

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

addBrand.htmlKode diubah sebagai berikut:

memperkenalkanvue.jsdokumen
Buat objek inti Vue untuk pengikatan data
menggunakanv-modelAtribut dibuat pada elemen formulirPengikatan data dua arah
Ikat acara klik untuk mengirimkan tombol

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

Setelah Tomcat menjalankan proyek web, tangkapan layar yang berjalan adalah sebagai berikut

Masukkan deskripsi gambar di sini

Elemen

definisi
- Ini adalah sekumpulan pustaka komponen situs web berdasarkan Vue yang dapat digunakan untuk membuat halaman web dengan cepat.
- Komponen: komponen yang membentuk suatu halaman web, seperti hyperlink, tombol, gambar, tabel, dll.
- dapat didasarkan padaSitus web resmi elemenbelajar

Melihat:

Digunakan dalam mulai cepatelement-uiUnduh situs web resmiTidak dapat mengunduh, Anda dapat menggunakan kode berikut untuk mengunduhnya sendiri (Anda dapat mengubah sendiri jalur unduhan dan URL versi yang sesuai)

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

ElemenMulai Cepat

Langkah 1: Perkenalkan file Vue.js

Langkah 2: Akanelement-uiDirektori ditempatkan di bawah direktori inti proyek Web (yaitu webapp), dan kemudian diimporelement-uicss, file js

Perkenalkan file Element css dan js lokal

<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="element-ui/lib/index.js"></script>
1
2
3
4

Perkenalkan file css dan js dari Elemen jarak jauh

<!-- 引入样式 -->
<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>
1
2
3
4

Langkah 3: Membuat objek inti Vue (lihat bagian Vue untuk detailnya)
Langkah 4: ElemenSitus web resmiSalin kode komponen Elemen

Kode dasar struktur halaman html adalah sebagai berikut:

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Contoh kode lengkapnya adalah sebagai berikut

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Setelah browser membuka file html, tampilan halamannya seperti berikut

Masukkan deskripsi gambar di sini

Tata letak elemen

Tata letak tata letak

Masukkan deskripsi gambar di sini

Definisi: Membuat tata letak dasar 24 kolom dengan cepat dan mudah
Penjelasan: Ini akan menghasilkan banyak baris, setiap baris memiliki 24 grid dasar
- Seperti yang ditunjukkan pada Gambar
  - Hanya ada satu grid pada baris pertama, namun grid ini menempati lebar 24 grid dasar
  - Baris kedua memiliki dua sel, masing-masing menempati lebar 12 sel dasar.
  - Hal yang sama berlaku untuk beberapa baris berikutnya

melangkah:

Langkah 1: Perkenalkan file vue.js, file index.css elemen, dan file index.js
Langkah 2: Buat objek inti Vue

Langkah3: Salin kode komponen yang Anda inginkan dari situs resminya

pergiTemukan komponen Layout di situs resminya, dengan mengambil contoh tata letak dasar, kami menemukan bahwa kode resmi mencakup kode html dan kode css, sebagai berikut
<style>Badan tag berisi kode gaya css, yang dapat kita perkenalkan secara eksternal atau tulis langsung ke halaman 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

Contoh kode lengkap

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

Buka halaman html melalui browser, screenshotnya seperti berikut

Masukkan deskripsi gambar di sini

Wadah tata letak wadah

Masukkan deskripsi gambar di sini

Definisi: Komponen wadah yang digunakan untuk tata letak untuk memfasilitasi konstruksi cepat struktur dasar halaman
Penjelasan: Seperti terlihat pada gambar di atas, ini adalah layout dengan bilah navigasi kiri

melangkah:

Langkah 1: Perkenalkan file vue.js, file index.css elemen, dan file index.js
Langkah 2: Buat objek inti Vue

Langkah3: Salin kode komponen yang Anda inginkan dari situs resminya

Ambil contoh pertama sebagai contoh, seperti yang ditunjukkan pada gambar situs resminya

Pada contoh ini selain kode html dan css juga terdapat atribut dari objek Vue, seperti berikut

<script>
  //export default为自己创建的Vue对象
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
    }
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Kita dapat menyalin properti Vue di situs resmi ke objek inti Vue kita sendiri, sebagai berikut

<script>
    new Vue({
        el : "#app",
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item)
            }
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Contoh kode lengkap

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

Buka halaman html melalui browser, screenshotnya seperti berikut

Masukkan deskripsi gambar di sini

Kasus elemen

Buatlah efek seperti gambar di bawah ini

Masukkan deskripsi gambar di sini

Catatan: Setiap langkah kasus ini telah diunggah ke Gitee dan dapat diunggahUnduh sendiri

Komponen tabel elemen

Langkah 1: Kunjungi situs web resmi dan salin contoh formulir yang sesuai (denganSitus web resmi dengan formulir statusMisalnya), kodenya adalah sebagai berikut:

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

Setelah browser membuka halaman html seperti terlihat pada gambar, mulailah melakukan penyesuaian setelah mendapatkan gambaran kasarnya.

Masukkan deskripsi gambar di sini

Langkah 2: Tambahkan kolom dan data ke tabel yang diperoleh pada Langkah 1 dan ubah nama kolom

menghapuswidthSetiap kolom akan otomatis menyesuaikan lebarnya setelah atribut.
Memusatkan isi tabel: Gulir ke bawah pada bagian komponen tabel yang sesuai di situs web resmi untuk menemukan metode dan properti yang sesuai, seperti yang ditunjukkan pada gambar.Tetapkan propertialign="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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

Masukkan deskripsi gambar di sini

Langkah 3: Tambahkan kolom tindakan ke tabel

Di kolom operasi ada修改Dan删除tombol, buka situs web resmi untuk menemukan kode tombol yang sesuai, salin dan tempel

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118

Masukkan deskripsi gambar di sini

Langkah 4: Menambahkan nomor seri ke tabel: Temukan tabel dengan nomor seri di situs resminya, dan salin kode untuk menambahkan nomor seri.

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

Masukkan deskripsi gambar di sini

Langkah 5: Menambahkan kotak centang ke tabel: Temukan tabel dengan kotak centang dan salin kode untuk kotak centang tersebut

Karena operasi batch dapat dilakukan pada baris data setelah memilih kotak centang di diagram kasus, tabel harus memiliki metode, jadi ketika kita menyalin kode untuk kotak centang, kita juga harus menyalin tabel dengan kotak centang Salin metode yang sesuai di (jangan lupa tulis metode ini di objek inti Vue), caranya adalah sebagai berikut
```
handleSelectionChange(val) {
    this.multipleSelection = val;
}
1
2
3
```
Metode ini memiliki propertimultipleSelection, jadi kita perlu menyalin atribut ini ke dalam kode kita sendiri. Kode lengkap terakhirnya adalah sebagai berikut:

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

Masukkan deskripsi gambar di sini

Tambahkan output ke metode kotak centang dan uji untuk melihat apakah berhasil
```
handleSelectionChange(val) {
    this.multipleSelection = val;
    console.log(this.multipleSelection)
}
1
2
3
4
```
Setelah membuka halaman di browser, buka alat pengembang → pilih pengontrol Konsol untuk melihat output, seperti yang ditunjukkan pada gambar

Komponen bentuk elemen

Langkah 6: Tambahkan formulir: Formulir dalam diagram kasus berbentuk horizontal, jadi kami menemukan formulir serupa (yaitu formulir sebaris) di situs web resmi dan menyalin kodenya sebagai berikut

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164

Masukkan deskripsi gambar di sini

Langkah 7: Ubah formnya agar sesuai dengan diagram kasus, kodenya sebagai berikut

Saat memodifikasi nama formulir, pastikan untuk mengubah nilai atribut v-model dan nilai atribut di objek Vue ke nama yang sesuai.

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170

Masukkan deskripsi gambar di sini

Kotak dialog elemen dan formulir

Masukkan deskripsi gambar di sini

Kotak dialog dan formulir muncul dengan mengklik tombol Tambah, jadi kita perlu menambahkannya sebelum membuat kotak dialog dan formulir.批量删除Dan新增dua tombol

Langkah 8: Tambahkan批量删除Dan新增tombol, tambahkan dialog

Temukan komponen kotak dialog di situs resminya. Di sini kita mengambil penggunaan dasar kotak dialog sebagai contoh dan menyalin kodenya.

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200

Masukkan deskripsi gambar di sini

Langkah 9: Tambahkan form pada kotak dialog, kodenya sebagai berikut

Temukan komponen formulir di situs web resmi dan modifikasi

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233

Masukkan deskripsi gambar di sini

Langkah 10: Langkah-langkahnya adalah sebagai berikut dan kodenya sebagai berikut

Memberi新增Acara klik pengikatan tombol, selama satu klik新增Tombol tersebut memunculkan formulir dialog
Ubah formulir yang menyertainya提交Metode yang terkait dengan peristiwa klik yang terikat pada tombol: Ubah metode menjadiaddBrand, selama tombol diklik, formulir dialog otomatis terkirim.
Kotak dialog disertakan确定、取消tombol hapus
Dilengkapi dengan formulir取消Tombol terikat pada peristiwa klik. Selama tombol diklik, bentuk dialog akan hilang.
Model yang terikat pada formulir adalahform(Sekarangmodel="form"), ubah nilai atributnya menjadibrand, dan lengkapi data pada objek merek
Atur sakelar status ke 0 atau 1: Temukan komponen sakelar yang sesuai di situs web resmi, lalu atur nilai atribut ke 0 atau 1 sesuai dengan atribut yang sesuai.

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233

Masukkan deskripsi gambar di sini

Bilah alat paging elemen

Langkah 11: Kunjungi situs web resmi untuk menemukan komponen paging, salin kode yang sesuai dan buat modifikasi yang sesuai. Kode tersebut adalah sebagai berikut:

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267

Masukkan deskripsi gambar di sini

Berbagi teknologi