Big Data------JavaWeb------Vue

2024-07-12

Vue

ορισμός
- Το Vue είναι ένα πλαίσιο διεπαφής που μπορεί να εξαλείψει τις λειτουργίες DOM σε εγγενή JavaScript και να απλοποιήσει τη γραφή.
  - Το πλαίσιο MyBatis που έμαθα πριν χρησιμοποιείται για την απλοποίηση της εγγραφής κώδικα JDBC, ενώ το Vue είναι ένα πλαίσιο διεπαφής που χρησιμοποιείται για την απλοποίηση της εγγραφής κώδικα JavaScript.
  - Προσθήκη ολοκληρωμένων περιπτώσεων σε Axios και JSONΥπάρχει ένας μεγάλος αριθμός λειτουργιών DOM στο , παραδείγματα είναι τα εξής:
```
let brandName = document.getElementById("brandName").value;
let companyName = document.getElementById("companyName").value;
let ordered = document.getElementById("ordered").value;
let description = document.getElementById("description").value;
// 获取单选框数组
let status = document.getElementsByName("status");
//2.3 给JS对象设置数据
formData.brandName = brandName;
formData.companyName = companyName;
formData.ordered = ordered;
formData.description = description;
1
2
3
4
5
6
7
8
9
10
11
```
- Βασίζεται στην ιδέα του MVVM (Model-View-ViewModel) και μπορεί να πραγματοποιήσει δεδομέναΑμφίδρομο δέσιμο , εστίαση στον προγραμματισμό στα δεδομένα
  - Σημείωση: Το μοτίβο MVC που μαθεύτηκε προηγουμένως μπορεί να επιτύχει μόνο μονόδρομη εμφάνιση από μοντέλο σε προβολή και δεν μπορεί να συνδέσει την προβολή και το μοντέλο μεταξύ τους (δηλαδή, εφόσον το ένα μοντέλο και η προβολή αλλάζουν, και το άλλο θα αλλαγή)
- Μπορείτε να το κάνετε μόνοι σαςΕπίσημη ιστοσελίδαμελέτη

Γρήγορη εκκίνηση με το Vue

Δημιουργήστε μια νέα σελίδα Html και εισαγάγετε τηνVue.jsέγγραφο
- Εάν εισάγετε τοπικά αρχεία Vue (ο blogger χρησιμοποιεί την τελευταία έκδοση του VUE2:Vue2.7.16开发环境, μπορείτε να μεταβείτε στον επίσημο ιστότοπο για να κατεβάσετε το αντίστοιχοjsέγγραφο)
```
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
1
```
- Εάν εισάγετε την υπηρεσία Vue που παρέχεται από το πακέτο απομακρυσμένου npm
  - αναπτυξιακό περιβάλλον
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
1
```
  - Παραγωγικό Περιβάλλον
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
1
```

Στην περιοχή κωδικού JS (σε<Script>σώμα ετικέτας), δημιουργήστε βασικά αντικείμενα Vue για δέσμευση δεδομένων

Όταν δημιουργείτε ένα αντικείμενο Vue, πρέπει να περάσετε ένα αντικείμενο js και στο αντικείμενο απαιτούνται οι ακόλουθες ιδιότητες:

Γνωρίσματα	εξηγώ
`el`	Καθορίστε ποιες ετικέτες διαχειρίζεται το Vue. Η τιμή αυτού του χαρακτηριστικού`#app` Μέσης`app` Για ετικέτες που διαχειρίζεται η Vue`id`τιμή χαρακτηριστικού
`data`	χρησιμοποιείται για τον καθορισμό τύπων δεδομένων
`methods`	Η συνάρτηση που χρησιμοποιείται για τον ορισμό, η τιμή της συνάρτησης μπορεί να επιστραφεί με επιστροφή

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

Προβολές γραφής (κώδικας HTML)
- Στο παρακάτω παράδειγμαdivΜε την ένδειξηidΓια την εφαρμογή, δημιουργείται το αντίστοιχο αντικείμενο Vue.elτιμή χαρακτηριστικού
- <input>Η ετικέτα δημιουργεί ένα πλαίσιο εισαγωγής μεv-modelΙδιότητες για αμφίδρομη σύνδεση του πλαισίου εισόδου στο μοντέλο Vue
  - σεv-modelΗ τιμή του χαρακτηριστικού αντιστοιχεί στο δημιουργημένο αντικείμενο Vue.returnΤα ονόματα των μοντέλων στις παρενθέσεις είναι συνεπή
- {{}}Ορίζεται στο Vue έκφραση παρεμβολής , χρησιμοποιείται για τη λήψη των δεδομένων στο μοντέλο
```
<div id="app">
    <input name="username" v-model="username">
    {{username}}
</div>
1
2
3
4
```

Ο πλήρης κώδικας αρχείου vueDemo1.html έχει ως εξής

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <input name="username" v-model="username">
            {{username}}
        </div>

        <!--引入vue.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <script>
            // 创建Vue核心对象
            new Vue({
                el:"#app",
                //data() 是 ECMAScript 6 版本的新的写法
                data() {
                    return {
                        username : ""
                    }
                }
                /*等同于
                data: function () {
                    return {
                        username : ""
                    }
                }这个是老版本
                */
            });
        </script>
    </body>
</html>
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

Αφού το πρόγραμμα περιήγησης ανοίξει τη σελίδα html, το στιγμιότυπο οθόνης που εκτελείται έχει ως εξής

Εισαγάγετε την περιγραφή της εικόνας εδώ

Οδηγία Vue

εντολή	αποτέλεσμα
`v-bind`	Σύνδεση τιμών χαρακτηριστικών σε ετικέτες HTML, όπως ρύθμιση `href` , `css`στυλ κλπ.
`v-model`	Δημιουργήστε αμφίδρομη σύνδεση δεδομένων σε στοιχεία φόρμας
`v-on`	Σύνδεση συμβάντων σε ετικέτες HTML
`v-if`	Υπό όρους απόδοση ενός στοιχείου, που προσδιορίζεται ως`true`Κάντε απόδοση όταν απαιτείται, διαφορετικά μην κάνετε απόδοση
`v-else`	Υπό όρους απόδοση ενός στοιχείου, που προσδιορίζεται ως`true`Κάντε απόδοση όταν απαιτείται, διαφορετικά μην κάνετε απόδοση
`v-else-if`	Υπό όρους απόδοση ενός στοιχείου, που προσδιορίζεται ως`true`Κάντε απόδοση όταν απαιτείται, διαφορετικά μην κάνετε απόδοση
`v-show`	Εμφάνιση ενός στοιχείου με βάση τις συνθήκες Η διαφορά είναι ότι αυτό που αλλάζει είναι`display`τιμή χαρακτηριστικού
`v-for`	Απόδοση λίστας, διέλευση των στοιχείων του κοντέινερ ή των ιδιοτήτων του αντικειμένου

ορισμός:HtmlΜε ετικέταv-Οι ειδικές ιδιότητες του προθέματος, διαφορετικές οδηγίες έχουν διαφορετική σημασία.

`v-bind`、`v-model`

v-bind: Σύνδεση τιμών χαρακτηριστικών σε ετικέτες HTML, όπως ρύθμιση href , cssστυλ κλπ.
- Παραδείγματα είναι τα εξής:
```
<a v-bind:href="url">百度一下</a>
1
```
- μπορεί να συντμηθεί ως
```
<a :href="url">百度一下</a>
1
```
  Στο μέλλον, εφόσον αλλάξει το URL, το αντίστοιχοv-bindΟι τιμές των χαρακτηριστικών θα αλλάξουν επίσης αμέσως.
v-model:Δημιουργήστε αμφίδρομη σύνδεση δεδομένων σε στοιχεία φόρμας
- Παραδείγματα είναι τα ακόλουθα
```
<input name="username" v-model="username"> 
1
```

Το πλήρες παράδειγμα είναι το εξής

<!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

Εισαγάγετε την περιγραφή της εικόνας εδώ

`v-on`

v-on: Σύνδεση συμβάντων σε ετικέτες Html
Παράδειγμα: Ένα συμβάν συνδέεται με ένα κλικ στο κουμπί και το συμβάν εκτελείταιshow()μέθοδος, η οποία είναι γραμμένη σεmethodsin vivo
- Ανεξάρτητα από την πλήρη φόρμα ή τη συντομευμένη φόρμα, εάν το δεσμευμένο συμβάν είναι μέθοδος, η μέθοδος μπορεί να παραλείψει τις παρενθέσεις.
- Η πλήρης φόρμα έχει ως εξής
```
<input type="button" value="按钮" v-on:click="show()">

<input type="button" value="按钮" v-on:click="show">
1
2
3
```
- Η συντομευμένη μορφή έχει ως εξής
```
<input type="button" value="按钮" @click="show()">

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

Το πλήρες παράδειγμα κώδικα είναι το εξής:

<!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

Αφού ανοίξετε τη σελίδα html μέσω του προγράμματος περιήγησης, το στιγμιότυπο οθόνης που εκτελείται είναι το εξής:

Εισαγάγετε την περιγραφή της εικόνας εδώ

`v-if`、`v-show`

v-if、v-else、v-else-if: Αποδώστε ένα στοιχείο υπό όρους, αποδώστε το όταν διαπιστωθεί ότι είναι αληθές, διαφορετικά μην το αποδώσετε.

Χρησιμοποιούνται μαζί είναι ισοδύναμα μεif-else if-else

<div v-if="count == 3">count==3</div>
<div v-else-if="count == 2">count==2</div>
<div v-else>count !=2 && count != 3</div>
1
2
3

Το πλήρες παράδειγμα κώδικα έχει ως εξής

<!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

Αφού το πρόγραμμα περιήγησης ανοίξει τη σελίδα html, το στιγμιότυπο οθόνης έχει ως εξής:

Εισαγάγετε την περιγραφή της εικόνας εδώ

v-show: Εμφάνιση στοιχείου βάσει συνθηκών
- v-show καιv-if Το αποτέλεσμα είναι το ίδιο, αλλά η αρχή εφαρμογής είναι διαφορετική:v-show Η αρχή της μη εμφάνισης είναι να προσθέσετε την αντίστοιχη ετικέταdisplay χαρακτηριστικό css και ορίστε την τιμή του χαρακτηριστικού σεnone,καιv-ifΔεν είναι άμεσαdivΟι ετικέτες θα εμφανίζονται στον πηγαίο κώδικα μόνο όταν πληρούνται οι προϋποθέσεις.div Επιγραφή.Για λεπτομέρειες, δείτε το στιγμιότυπο οθόνης του πλήρους παραδείγματος κώδικα.
```
<div v-show="count == 3">div4</div>
1
```

Το πλήρες παράδειγμα κώδικα έχει ως εξής

<!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

Το πρόγραμμα περιήγησης ανοίγει το αρχείο html και το στιγμιότυπο οθόνης που εκτελείται είναι το εξής:

Εισαγάγετε την περιγραφή της εικόνας εδώ

`v-for`

v-for: Απόδοση λίστας, διέλευση των στοιχείων του κοντέινερ ή των ιδιοτήτων του αντικειμένου
Διασχίστε τη συστοιχία με κανονικό τρόπο
```
<div v-for="addr in addrs">
    {{addr}}<br>
</div>
1
2
3
```

Διασχίστε τον πίνακα κατά ευρετήριο

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

παράδειγμα κώδικα

Διασχίστε τη συστοιχία με κανονικό τρόπο

<!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

Εισαγάγετε την περιγραφή της εικόνας εδώ

Διασχίστε τον πίνακα κατά ευρετήριο

<!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

Εισαγάγετε την περιγραφή της εικόνας εδώ

Κύκλος ζωής Vue

κατάσταση	σκηνικό κύκλο
`beforeCreate`	Πριν τη δημιουργία
`created`	Μετά τη δημιουργία
`beforeMount`	πριν τη φόρτωση
`mounted`	Η τοποθέτηση ολοκληρώθηκε
`beforeUpdate`	Πριν την ενημέρωση
`updated`	ΕΠΙΚΑΙΡΟΠΟΙΗΜΕΝΟ
`beforeDestroy`	πριν την καταστροφή
`destroyed`	Μετά την καταστροφή

Υπάρχουν οκτώ στάδια στον κύκλο ζωής του Vue
- Κάθε φορά που ενεργοποιείται ένα συμβάν του κύκλου ζωής, αμεθόδους κύκλου ζωής (ονομάζεται επίσης μέθοδος γάντζου)
Ακολουθεί η θέση του κάθε κύκλου ζωής
mounted: Η τοποθέτηση ολοκληρώθηκε, η προετοιμασία Vue επιτυχής, η απόδοση της σελίδας Html επιτυχής
- Μπορούμε να στείλουμε ένα ασύγχρονο αίτημα σε αυτήν τη μέθοδο για τη φόρτωση δεδομένων
- Απλό παράδειγμα
```
new Vue({
    el:"#app",
    mounted() {
      alert("Vue挂载完毕，发送异步请求")  
    }
});
1
2
3
4
5
6
```

Πλήρες παράδειγμα κώδικα

<!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

Θήκη Vue

Στόχος: Χρησιμοποιήστε το Vue για να απλοποιήσετε το ερώτημα επωνυμίας και να προσθέσετε λειτουργίες
Αυτή η υπόθεση ξεκινά μεΟλοκληρωμένη περίπτωση Axios και JSONΜε βάση αυτό, το έργο αυτό ονομάζεται:VueDemo, έχει μεταφορτωθεί στο Gitee και μπορείΚατεβάστε μόνοι σας

Αναζήτηση όλων

Εισαγάγετε την περιγραφή της εικόνας εδώ

brand.htmlΟι αλλαγές που έγιναν είναι οι εξής

brand.htmlΟι αλλαγές στον κώδικα είναι οι εξής:

Παρουσιάστε το αρχείο vue.js
Δημιουργήστε βασικά αντικείμενα Vue για δέσμευση δεδομένων
χρήσηmountedΗ μέθοδος στέλνει ένα ασύγχρονο αίτημα και ερωτά τα δεδομένα μετά τη φόρτωση της σελίδας.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <table border="1" cellspacing="0">
                <tr>
                    <th>序号</th>
                    <th>品牌名称</th>
                    <th>企业名称</th>
                    <th>排序</th>
                    <th>品牌介绍</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                <!--使用v-for循环遍历-->
                <tr v-for="(brand,i) in brands" align="center">
                    <td>{{i + 1}}</td>
                    <td>{{brand.brandName}}</td>
                    <td>{{brand.companyName}}</td>
                    <td>{{brand.ordered}}</td>
                    <td>{{brand.description}}</td>
                    <td>{{brand.status == 1 ? "启用" : "禁用"}}</td>
                    <td><a href="#">修改</a><a href="#">删除</a></td>
                </tr>
            </table>
        </div>
        <script src="js/axios-0.18.0.js"></script>
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <script>
            new Vue({
                el: "#app",
                data() {
                    return {
                        brands:[]
                    }
                },
                // 页面加载完成后利用mounted方法发送异步请求并查询数据
                mounted() {
                    // 发送异步请求并查询数据
                    // 在Vue的实例方法中，this指向Vue实例本身
                    var _this = this;
                    axios({
                        method:"get",
                        url:"http://localhost:8080/VueDemo/selectAllServlet"
                    }).then(function (resp) {
                        // 获取响应数据，并将数据赋给brands
                        // 错误写法：this.brands = resp.data;
                        /* 在Axios的then方法的回调函数中，this可能指向其他对象，通常是全局对象（在浏览器中是 window 对象）
                            所以需要提前将代指Vue示例本身的this赋给_this
                         */
                        //axios会自动将获取的JSON字符串数据转为js对象数组
                        _this.brands = resp.data;
                    })
                }
            })
        </script>
    </body>
</html>
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

Το στιγμιότυπο οθόνης μετά την εκτέλεση του έργου web από τον Tomcat είναι το ακόλουθο

Εισαγάγετε την περιγραφή της εικόνας εδώ

ερώτηση
- γιατί ναvar _this = this, γιατί όχι άμεσαthis.brands=resp.data
  
  σε JavaScript this Η συμπεριφορά μιας λέξης-κλειδιού εξαρτάται από το πλαίσιο στο οποίο ονομάζεται. Στη μέθοδο παραδείγματος του Vue,this Υποδεικνύει την ίδια την παρουσία του Vue.Αλλά στον Αξιόthen Στη συνάρτηση επανάκλησης της μεθόδου,this Μπορεί να δείχνει σε άλλα αντικείμενα, συνήθως το καθολικό αντικείμενο (σε προγράμματα περιήγησης αυτό είναιwindow αντικείμενο). Αυτό θα έχει ως αποτέλεσμα να μην μπορείτε να έχετε σωστή πρόσβαση στις ιδιότητες και τις μεθόδους της παρουσίας Vue.
  
  εξ ορισμού var _this = this, θα το παράδειγμα του Vue this αποθήκευση σε_this μεταβλητή και στη συνέχεια χρησιμοποιήστε τη στη συνάρτηση επανάκλησης_this για να αναφέρετε σωστά την παρουσία Vue.

Προσθήκη σε

Εισαγάγετε την περιγραφή της εικόνας εδώ

addbrand.htmlΟι αλλαγές που έγιναν είναι οι εξής

brand.htmlΟι αλλαγές στον κώδικα είναι οι εξής:

Δημιουργήστε ένα νέο κουμπί και συνδέστε ένα συμβάν κλικ σε αυτό

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--给新增按钮绑定单击事件-->
            <input type="button" value="新增" v-on:click="addBrand()"><br>
            <hr>
            <table border="1" cellspacing="0">
                <tr>
                    <th>序号</th>
                    <th>品牌名称</th>
                    <th>企业名称</th>
                    <th>排序</th>
                    <th>品牌介绍</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                <!--使用v-for循环遍历-->
                <tr v-for="(brand,i) in brands" align="center">
                    <td>{{i + 1}}</td>
                    <td>{{brand.brandName}}</td>
                    <td>{{brand.companyName}}</td>
                    <td>{{brand.ordered}}</td>
                    <td>{{brand.description}}</td>
                    <td>{{brand.status == 1 ? "启用" : "禁用"}}</td>
                    <td><a href="#">修改</a><a href="#">删除</a></td>
                </tr>
            </table>
        </div>
        <script src="js/axios-0.18.0.js"></script>
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <script>
            new Vue({
                el: "#app",
                data() {
                    return {
                        brands:[]
                    }
                },
                methods:{
                  addBrand() {
                      location.href = "/VueDemo/addBrand.html";
                  }
                },
                // 页面加载完成后利用mounted方法发送异步请求并查询数据
                mounted() {
                    // 发送异步请求并查询数据
                    // 在Vue的实例方法中，this指向Vue实例本身
                    var _this = this;
                    axios({
                        method:"get",
                        url:"http://localhost:8080/VueDemo/selectAllServlet"
                    }).then(function (resp) {
                        // 获取响应数据，并将数据赋给brands
                        // 错误写法：this.brands = resp.data;
                        /* 在Axios的then方法的回调函数中，this可能指向其他对象，通常是全局对象（在浏览器中是 window 对象）
                            所以需要提前将代指Vue示例本身的this赋给_this
                         */
                        //axios会自动将获取的JSON字符串数据转为js对象数组
                        _this.brands = resp.data;
                    })
                }
            })
        </script>
    </body>
</html>
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.htmlΟ κώδικας τροποποιείται ως εξής:

παρουσιάζωvue.jsέγγραφο
Δημιουργήστε βασικά αντικείμενα Vue για δέσμευση δεδομένων
χρήσηv-modelΤα χαρακτηριστικά γίνονται σε στοιχεία φόρμαςΑμφίδρομη δέσμευση δεδομένων
Κουμπί δέσμευσης κλικ για υποβολή

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>添加品牌</title>
    </head>
    <body>
        <h3>添加品牌</h3>
        <div id="app">
            <!--表单直接提交属于同步请求方式提交表单，为了使用异步方式以及AJAX+JSON异步方式提交所以要将action属性值设为空并将提交按钮的type属性值设为button-->
            <!--action的属性值为浏览器提交到服务器的资源路径-->
            <!--将action属性值由具体的url改为空-->
            <form action="" method="post">
                品牌名称：<input id="brandName" name="brandName" v-model="brand.brandName"><br>
                企业名称：<input id="companyName" name="companyName" v-model="brand.companyName"><br>
                排序：<input id="ordered" name="ordered" v-model="brand.ordered"><br>
                描述信息：<textarea rows="5" cols="20" id="description" name="description" v-model="brand.description"></textarea><br>
                状态：
                <input type="radio" name="status" value="0" v-model="brand.status">禁用
                <input type="radio" name="status" value="1" v-model="brand.status">启用<br>
                <!--将提交按钮的type属性由submit改为button-->
                <input type="button" v-on:click="submitForm()" value="提交">
            </form>
        </div>

        <script src="js/axios-0.18.0.js"></script>
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>

        <script>
            new Vue({
                el: "#app",
                data() {
                    return {
                        /*
                        由于数据最终要封装为对象，所以直接创建一个对象即可
                        注意：不需要给该对象属性，是因为 Vue.js 的双向数据绑定机制和响应式系统会自动处理，
                        即v-model 自动创建对象属性并追踪它们，只要用户填写输入框，就会自动将其作为brand对象的属性封装起来
                         */
                        brand:{}
                    }
                },
                methods:{
                    submitForm() {
                        var _this = this;
                        // 发送axios请求并添加数据
                        axios({
                            method:"post",
                            url:"http://localhost:8080/VueDemo/addServlet",
                            //3 JSON数据格式发送请求
                            // formData为JS对象，Axios会自动将JS对象转为JSON字符串然后在传给服务端
                            data:_this.brand
                        }).then(function (resp) {
                            //4 获取响应数据并判断响应数据是否为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

Αφού ο Tomcat εκτελέσει το έργο web, το στιγμιότυπο οθόνης που εκτελείται είναι το ακόλουθο

Εισαγάγετε την περιγραφή της εικόνας εδώ

Στοιχείο

ορισμός
- Είναι ένα σύνολο βιβλιοθηκών στοιχείων ιστότοπου που βασίζονται στο Vue που μπορούν να χρησιμοποιηθούν για τη γρήγορη δημιουργία ιστοσελίδων.
- Components: τα στοιχεία που συνθέτουν μια ιστοσελίδα, όπως υπερσύνδεσμοι, κουμπιά, εικόνες, πίνακες κ.λπ.
- μπορεί να βασίζεται σεΕπίσημος ιστότοπος του Elementμελέτη

Ειδοποίηση:

Χρησιμοποιείται σε γρήγορη εκκίνησηelement-uiΚατεβάστε την επίσημη ιστοσελίδαΔεν είναι δυνατή η λήψη, μπορείτε να χρησιμοποιήσετε τον παρακάτω κώδικα για να το κατεβάσετε μόνοι σας (μπορείτε να αλλάξετε τη διαδρομή λήψης και τη διεύθυνση URL της αντίστοιχης έκδοσης μόνοι σας)

import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.nio.charset.StandardCharsets;
import java.util.ArrayList;

/**
 * 下载element-ui
 */
public class Main {
    //本地保存目录
    static String fileP = "F:/insert/java/element-ui/";
    //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

ElementQuick Start

Βήμα 1: Παρουσιάστε το αρχείο Vue.js
Βήμα 2: Θαelement-uiΟ κατάλογος τοποθετείται κάτω από τον κεντρικό κατάλογο του έργου Web (δηλαδή webapp) και στη συνέχεια εισάγεταιelement-uiαρχεία css, js
- Εισαγάγετε τα τοπικά αρχεία Element css και js
```

<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script src="element-ui/lib/index.js"></script>
1
2
3
4
```
- Εισαγάγετε τα αρχεία css και js του απομακρυσμένου Element
```

<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
```
Βήμα 3: Δημιουργία βασικών αντικειμένων Vue (ανατρέξτε στην ενότητα Vue για λεπτομέρειες)
Βήμα 4: ΣτοιχείοΕπίσημη ιστοσελίδαΑντιγράψτε τον κωδικό στοιχείου Element

Ο βασικός κώδικας δομής σελίδας html είναι ο εξής:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码并做对应设计更改-->
            
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app"
            })
        </script>
    </body>
</html>
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

Το πλήρες παράδειγμα κώδικα έχει ως εξής

<!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

Αφού το πρόγραμμα περιήγησης ανοίξει το αρχείο html, η σελίδα φαίνεται ως εξής

Εισαγάγετε την περιγραφή της εικόνας εδώ

Διάταξη στοιχείων

Διάταξη διάταξης

Εισαγάγετε την περιγραφή της εικόνας εδώ

Ορισμός: Δημιουργήστε γρήγορα και εύκολα διατάξεις με βασικές 24 στήλες
Επεξήγηση: Θα παρέχει πολλές σειρές, κάθε σειρά έχει 24 βασικά πλέγματα
- Όπως φαίνεται στο ΣΧ
  - Υπάρχει μόνο ένα πλέγμα στην πρώτη σειρά, αλλά αυτό το πλέγμα καταλαμβάνει το πλάτος 24 βασικών πλεγμάτων
  - Η δεύτερη σειρά έχει δύο κελιά, καθένα από τα οποία καταλαμβάνει το πλάτος 12 βασικών κελιών.
  - Το ίδιο ισχύει και για τις επόμενες γραμμές

βήμα:

Βήμα 1: Εισάγετε το αρχείο vue.js, το αρχείο index.css του στοιχείου και το αρχείο index.js
Βήμα 2: Δημιουργία αντικειμένου πυρήνα Vue

Βήμα 3: Αντιγράψτε τον κωδικό στοιχείου που θέλετε από τον επίσημο ιστότοπο

πηγαίνωΒρείτε το στοιχείο Διάταξη στον επίσημο ιστότοπο, λαμβάνοντας ως παράδειγμα τη βασική διάταξη, διαπιστώσαμε ότι ο επίσημος κώδικας περιλαμβάνει κώδικα html και κώδικα css, ως εξής
<style>Το σώμα της ετικέτας περιέχει κώδικα στυλ css, τον οποίο μπορούμε να εισαγάγουμε εξωτερικά ή να γράψουμε απευθείας στη σελίδα html.

<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
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

Πλήρες παράδειγμα κώδικα

<!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

Ανοίξτε τη σελίδα html μέσω του προγράμματος περιήγησης, το στιγμιότυπο οθόνης έχει ως εξής

Εισαγάγετε την περιγραφή της εικόνας εδώ

Δοχείο διάταξης κοντέινερ

Εισαγάγετε την περιγραφή της εικόνας εδώ

Ορισμός: Στοιχείο κοντέινερ που χρησιμοποιείται για διάταξη για τη διευκόλυνση της γρήγορης κατασκευής της βασικής δομής της σελίδας
Εξήγηση: Όπως φαίνεται στην παραπάνω εικόνα, είναι μια διάταξη με αριστερή γραμμή πλοήγησης

βήμα:

Βήμα 1: Εισάγετε το αρχείο vue.js, το αρχείο index.css του στοιχείου και το αρχείο index.js
Βήμα 2: Δημιουργία αντικειμένου πυρήνα Vue

Βήμα 3: Αντιγράψτε τον κωδικό στοιχείου που θέλετε από τον επίσημο ιστότοπο

Πάρτε το πρώτο παράδειγμα ως παράδειγμα, όπως φαίνεται στην εικόνα της επίσημης ιστοσελίδας

Σε αυτό το παράδειγμα, εκτός από τον κώδικα html και css, υπάρχουν επίσης χαρακτηριστικά του αντικειμένου Vue, ως εξής

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

Μπορούμε να αντιγράψουμε τις ιδιότητες του Vue στην επίσημη παρουσία του ιστότοπου στο δικό μας βασικό αντικείμενο Vue, ως εξής

<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

Πλήρες παράδειγμα κώδικα

<!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

Ανοίξτε τη σελίδα html μέσω του προγράμματος περιήγησης, το στιγμιότυπο οθόνης έχει ως εξής

Εισαγάγετε την περιγραφή της εικόνας εδώ

Θήκη στοιχείων

Κάντε το εφέ όπως φαίνεται παρακάτω

Εισαγάγετε την περιγραφή της εικόνας εδώ

Σημείωση: Κάθε βήμα αυτής της υπόθεσης έχει μεταφορτωθεί στο Gitee και μπορεί να γίνειΚατεβάστε μόνοι σας

Στοιχείο πίνακα στοιχείων

Βήμα 1: Μεταβείτε στον επίσημο ιστότοπο και αντιγράψτε το αντίστοιχο παράδειγμα της φόρμας (μεΕπίσημος ιστότοπος με έντυπο κατάστασηςΓια παράδειγμα), ο κώδικας είναι ο εξής:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->
            <!--表格代码-->
            <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

Αφού το πρόγραμμα περιήγησης ανοίξει τη σελίδα html, όπως φαίνεται στην εικόνα, ξεκινήστε να κάνετε προσαρμογές αφού λάβετε την πρόχειρη εικόνα.

Εισαγάγετε την περιγραφή της εικόνας εδώ

Βήμα 2: Προσθέστε στήλες και δεδομένα στον πίνακα που ελήφθη στο Βήμα 1 και τροποποιήστε τα ονόματα στηλών

διαγράφωwidthΚάθε στήλη θα προσαρμόσει αυτόματα το πλάτος της μετά το χαρακτηριστικό.
Κεντράρετε το περιεχόμενο του πίνακα: Κάντε κύλιση προς τα κάτω στην αντίστοιχη ενότητα στοιχείων πίνακα του επίσημου ιστότοπου για να βρείτε τις αντίστοιχες μεθόδους και ιδιότητες, όπως φαίνεται στην εικόνα.Ορισμός ιδιοτήτωνalign="center"

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->
            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName">
                    <el-table-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

Εισαγάγετε την περιγραφή της εικόνας εδώ

Βήμα 3: Προσθέστε μια στήλη ενεργειών στον πίνακα

Στη στήλη λειτουργίας υπάρχουν修改και删除κουμπί, μεταβείτε στον επίσημο ιστότοπο για να βρείτε τον αντίστοιχο κωδικό κουμπιού, αντιγράψτε και επικολλήστε τον

<!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

Εισαγάγετε την περιγραφή της εικόνας εδώ

Βήμα 4: Προσθήκη σειριακού αριθμού στον πίνακα: Βρείτε τον πίνακα με αύξοντα αριθμό στον επίσημο ιστότοπο και αντιγράψτε τον κωδικό για την προσθήκη του σειριακού αριθμού.

<!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

Εισαγάγετε την περιγραφή της εικόνας εδώ

Βήμα 5: Προσθήκη πλαισίου ελέγχου σε πίνακα: Βρείτε τον πίνακα με πλαίσιο ελέγχου και αντιγράψτε τον κωδικό για το πλαίσιο ελέγχου

Δεδομένου ότι οι λειτουργίες δέσμης μπορούν να εκτελεστούν στη σειρά δεδομένων μετά την επιλογή του πλαισίου ελέγχου στο διάγραμμα περίπτωσης, ο πίνακας πρέπει να έχει μια μέθοδο, επομένως όταν αντιγράφουμε τον κωδικό για το πλαίσιο ελέγχου, πρέπει επίσης να αντιγράψουμε τον πίνακα με το πλαίσιο ελέγχου Αντιγραφή η αντίστοιχη μέθοδος στο (μην ξεχάσετε να γράψετε αυτήν τη μέθοδο στο αντικείμενο πυρήνα Vue), η μέθοδος είναι η εξής
```
handleSelectionChange(val) {
    this.multipleSelection = val;
}
1
2
3
```
Αυτή η μέθοδος έχει μια ιδιότηταmultipleSelection, επομένως πρέπει να αντιγράψουμε αυτό το χαρακτηριστικό στον δικό μας κώδικα Ο τελικός πλήρης κώδικας είναι ο εξής:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->
            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                    <!--给表格添加复选框-->
                    <el-table-column
                            type="selection">
                    </el-table-column>
                    <!--给表格添加序号-->
                    <el-table-column
                            type="index">
                    </el-table-column>

                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            label="排序"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="当前状态"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                //表格属性
                methods: {
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    },
                    // 复选框选中后执行的方法
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                    }
                },
                data() {
                    return {
                        multipleSelection: [],
                        tableData: [{
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }]
                    }
                }
            })
        </script>
    </body>
</html>
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

Εισαγάγετε την περιγραφή της εικόνας εδώ

Προσθέστε έξοδο στη μέθοδο του πλαισίου ελέγχου και ελέγξτε εάν είναι επιτυχής Ο κώδικας είναι ο ακόλουθος
```
handleSelectionChange(val) {
    this.multipleSelection = val;
    console.log(this.multipleSelection)
}
1
2
3
4
```
Αφού ανοίξετε τη σελίδα στο πρόγραμμα περιήγησης, ανοίξτε τα εργαλεία προγραμματιστή → επιλέξτε τον ελεγκτή κονσόλας για να δείτε την έξοδο, όπως φαίνεται στην εικόνα

Στοιχείο μορφής στοιχείο

Βήμα 6: Προσθήκη φόρμας: Η φόρμα στο διάγραμμα περίπτωσης είναι οριζόντια, επομένως βρίσκουμε μια παρόμοια φόρμα (δηλαδή ενσωματωμένη φόρμα) στον επίσημο ιστότοπο και αντιγράφουμε τον κωδικό

<!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

Εισαγάγετε την περιγραφή της εικόνας εδώ

Βήμα 7: Τροποποιήστε τη φόρμα για να είναι συνεπής με το διάγραμμα περίπτωσης, ο κωδικός είναι ο ακόλουθος

Όταν τροποποιείτε το όνομα της φόρμας, φροντίστε να τροποποιήσετε την τιμή του χαρακτηριστικού v-model και την τιμή του χαρακτηριστικού στο αντικείμενο Vue στο αντίστοιχο όνομα.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->

            <!--表单代码-->
            <el-form :inline="true" :model="brand" class="demo-form-inline">

                <el-form-item label="当前状态">
                    <el-select v-model="brand.status" placeholder="当前状态">
                        <el-option label="1" value="启用"></el-option>
                        <el-option label="0" value="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业名称">
                    <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                </el-form-item>
                <el-form-item label="品牌名称">
                    <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                    <!--给表格添加复选框-->
                    <el-table-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

Εισαγάγετε την περιγραφή της εικόνας εδώ

Παράθυρα διαλόγου και φόρμες στοιχείων

Εισαγάγετε την περιγραφή της εικόνας εδώ

Τα παράθυρα διαλόγου και οι φόρμες εμφανίζονται κάνοντας κλικ στο κουμπί Προσθήκη, επομένως πρέπει να τα προσθέσουμε πριν δημιουργήσουμε πλαίσια διαλόγου και φόρμες.批量删除και新增δύο κουμπιά

Βήμα 8: Προσθήκη σε批量删除και新增κουμπί, προσθήκη διαλόγου

Βρείτε το στοιχείο του πλαισίου διαλόγου στον επίσημο ιστότοπο Εδώ παίρνουμε μια βασική χρήση του πλαισίου διαλόγου ως παράδειγμα και αντιγράφουμε τον κώδικά του.

<!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

Εισαγάγετε την περιγραφή της εικόνας εδώ

Βήμα 9: Προσθέστε μια φόρμα στο παράθυρο διαλόγου, ο κώδικας είναι ο εξής

Βρείτε το στοιχείο φόρμας στον επίσημο ιστότοπο και τροποποιήστε το

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->

            <!--表单代码-->
            <el-form :inline="true" :model="brand" class="demo-form-inline">
                <el-form-item label="当前状态">
                    <el-select v-model="brand.status" placeholder="当前状态">
                        <el-option label="1" value="启用"></el-option>
                        <el-option label="0" value="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业名称">
                    <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                </el-form-item>
                <el-form-item label="品牌名称">
                    <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

            <!--批量删除和新增按钮-->
            <el-row>
                <el-button type="danger" plain>批量删除</el-button>
                <el-button type="primary">新增</el-button>
            </el-row>

            <!--要弹出的对话框-->
            <!--单击事件发生后会将dialogVisible属性值设置为true，此时对话框就会打开-->
            <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
            <el-dialog
                    title="编辑品牌"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性-->
                <!--对话框中的表单-->
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="品牌名称">
                        <el-input v-model="form.brandName"></el-input>
                    </el-form-item>
                    <el-form-item label="企业名称">
                        <el-input v-model="form.companyName"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="form.ordered"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.description"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-switch v-model="form.status"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addBrand">提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>

            <!--表格代码-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                    <!--给表格添加复选框-->
                    <el-table-column
                            type="selection">
                    </el-table-column>
                    <!--给表格添加序号-->
                    <el-table-column
                            type="index">
                    </el-table-column>

                    <el-table-column
                            prop="brandName"
                            label="品牌名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="companyName"
                            label="企业名称"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="ordered"
                            label="排序"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="当前状态"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center">
                        <el-row>
                            <el-button type="primary">修改</el-button>
                            <el-button type="danger">删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>
        </div>

        <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
        <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="element-ui/lib/index.js"></script>

        <!--2 创建Vue核心对象-->
        <script>
            new Vue({
                el : "#app",
                //表格属性
                methods: {
                    // 表单方法
                    onSubmit() {
                        // 测试是否绑定成功：输出到浏览器控制台测试是否将表单数据封装到brand对象中
                        console.log(this.brand);
                    },
                    // 单击对话框右上角x时会弹出的确认关闭框，若不想要将其删除即可
                    handleClose(done) {
                        this.$confirm('确认关闭？')
                            .then(_ => {
                                done();
                            })
                            .catch(_ => {});
                    },
                    //弹出的对话康中表单的添加方法
                    addBrand() {

                    },
                    // 复选框选中后执行的方法
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                        //测试与复选框关联的方法是否成功，测试完成后自行删除即可
                        console.log(this.multipleSelection)
                    },
                    // 表格方法
                    tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                            return 'warning-row';
                        } else if (rowIndex === 3) {
                            return 'success-row';
                        }
                        return '';
                    }
                },
                data() {
                    return {
                        // 表单数据
                        brand: {
                            status: '',
                            companyName: '',
                            brandName: ''
                        },
                        // 新增按钮弹出的对话框初始状态是否展示的标记，默认为false
                        dialogVisible: false,
                        form: {
                            brandName: '',
                            companyName: '',
                            ordered: '',
                            description: '',
                            status: false
                        },
                        // 复选框数据
                        multipleSelection: [],
                        // 表格数据
                        tableData: [{
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }, {
                            brandName: '小米',
                            companyName: '小米科技有限公司',
                            ordered: '10',
                            status: '启用'
                        }]
                    }
                }
            })
        </script>
    </body>
</html>
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

Εισαγάγετε την περιγραφή της εικόνας εδώ

Βήμα 10: Τα βήματα είναι τα εξής και ο κώδικας είναι ο εξής

Δίνω新增Συμβάν κλικ δεσμευτικού κουμπιού, με ένα κλικ新增Το κουμπί ανοίγει τη φόρμα διαλόγου
Αλλάξτε τη φόρμα που συνοδεύει提交Η μέθοδος που αντιστοιχεί στο συμβάν κλικ που συνδέεται με το κουμπί: Αλλάξτε τη μέθοδο σεaddBrand, εφόσον πατηθεί το κουμπί, η φόρμα διαλόγου υποβάλλεται αυτόματα.
Το πλαίσιο διαλόγου συνοδεύεται από确定、取消κουμπί διαγραφής
Συνοδεύεται από τη φόρμα取消Το κουμπί είναι δεσμευμένο σε ένα συμβάν κλικ Όσο γίνεται κλικ στο κουμπί, η φόρμα διαλόγου εξαφανίζεται.
Το μοντέλο που δεσμεύεται στη φόρμα είναιform(Τώρα αμέσωςmodel="form"), αλλάξτε την τιμή του χαρακτηριστικού του σεbrandκαι συμπληρώστε τα δεδομένα στο αντικείμενο επωνυμίας
Ρυθμίστε τον διακόπτη κατάστασης σε 0 ή 1: Βρείτε το αντίστοιχο στοιχείο διακόπτη στον επίσημο ιστότοπο και, στη συνέχεια, ορίστε την τιμή του χαρακτηριστικού σε 0 ή 1 σύμφωνα με τα αντίστοιχα χαρακτηριστικά.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--表格css样式-->
        <style>
            .el-table .warning-row {
                background: oldlace;
            }

            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--3 从官网复制自己想要的组件代码-->

            <!--表单代码-->
            <el-form :inline="true" :model="brand" class="demo-form-inline">
                <el-form-item label="当前状态">
                    <el-select v-model="brand.status" placeholder="当前状态">
                        <el-option label="1" value="启用"></el-option>
                        <el-option label="0" value="禁用"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业名称">
                    <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                </el-form-item>
                <el-form-item label="品牌名称">
                    <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>

            <!--批量删除和新增按钮-->
            <el-row>
                <el-button type="danger" plain>批量删除</el-button>
                <!--新增按钮绑定单击事件：只要一单击`新增`按钮就弹出对话框表单-->
                <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
            </el-row>

            <!--要弹出的对话框-->
            <!--单击事件发生后会将dialogVisible属性值设置为true，此时对话框就会打开-->
            <el-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

Εισαγάγετε την περιγραφή της εικόνας εδώ

Γραμμή εργαλείων σελιδοποίησης στοιχείων

Βήμα 11: Μεταβείτε στον επίσημο ιστότοπο για να βρείτε το στοιχείο σελιδοποίησης, να αντιγράψετε τον αντίστοιχο κώδικα και να κάνετε τις αντίστοιχες τροποποιήσεις.

<!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

Εισαγάγετε την περιγραφή της εικόνας εδώ

Κοινή χρήση τεχνολογίας