Partage de technologie

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

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Vue

  • définition

    • Vue est un framework frontal capable d'éliminer les opérations DOM en JavaScript natif et de simplifier l'écriture.

      • Le framework MyBatis que j'ai appris auparavant est utilisé pour simplifier l'écriture de code JDBC ; tandis que Vue est un framework frontal utilisé pour simplifier l'écriture de code JavaScript.

      • Ajout de cas complets dans Axios et JSONIl existe un grand nombre d'opérations DOM dans , des exemples sont les suivants :

        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
    • Il est basé sur l'idée de MVVM (Model-View-ViewModel) et peut réaliser des donnéesLiaison bidirectionnelle , concentrer la programmation sur les données

      • Remarque : Le modèle MVC appris précédemment ne peut réaliser qu'un affichage unidirectionnel d'un modèle à l'autre et ne peut pas lier la vue et le modèle l'un à l'autre (c'est-à-dire que tant que l'un du modèle et de la vue change, l'autre le fera également). changement)

      Insérer la description de l'image ici

    • Peut être fait par vous-mêmeSite officielétude

Démarrage rapide avec Vue

  • Créez une nouvelle page HTML et importez-laVue.jsdocument

    • Si vous introduisez des fichiers Vue locaux (le blogueur utilise la dernière version de VUE2 :Vue2.7.16开发环境, vous pouvez vous rendre sur le site officiel pour télécharger le correspondantjsdocument)

      <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
      
      • 1
    • Si vous introduisez le service Vue fourni par le package npm distant

      • environnement de développement

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        
        • 1
      • Environnement de production

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        
        • 1
  • Dans la zone de code JS (dans<Script>corps de balise), créer des objets de base Vue pour la liaison de données

    • Lors de la création d'un objet Vue, vous devez transmettre un objet js et les propriétés suivantes sont requises dans l'objet :

      Les attributsexpliquer
      el Spécifiez quelles balises sont gérées par Vue. La valeur de cet attribut#app milieuapp Pour les balises gérées par Vueidvaleur d'attribut
      datautilisé pour définir les types de données
      methodsFonction utilisée pour la définition, la valeur de la fonction peut être renvoyée via return
      new Vue({
          el:"#app",
          data() {
              return {
                  username : ""
              }
          }
      });
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
  • Écriture de vues (code HTML)

    • Dans l'exemple suivantdivÉtiquetéidPour l'application, l'objet Vue correspondant est créé.elvaleur d'attribut
    • <input>Label crée une zone de saisie avecv-modelPropriétés pour lier bidirectionnellement la zone de saisie au modèle Vue
      • dansv-modelLa valeur de l'attribut correspond à l'objet Vue créé.returnLes noms de modèles entre parenthèses sont cohérents
    • {{}}Il est défini dans Vue expression d'interpolation , utilisé pour obtenir les données dans le modèle
    <div id="app">
        <input name="username" v-model="username">
        {{username}}
    </div>
    
    • 1
    • 2
    • 3
    • 4
  • Le code complet du fichier vueDemo1.html est le suivant

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

    Une fois que le navigateur ouvre la page HTML, la capture d'écran en cours d'exécution est la suivante

    Insérer la description de l'image ici

Directive Vue

instructioneffet
v-bindLiez les valeurs d'attribut aux balises HTML, telles que le paramètre href , cssstyle, etc.
v-modelCréer une liaison de données bidirectionnelle sur les éléments de formulaire
v-onLier les événements aux balises HTML
v-ifRendre conditionnellement un élément, déterminé commetrueEffectuer le rendu lorsque nécessaire, sinon ne pas effectuer le rendu
v-elseRendre conditionnellement un élément, déterminé commetrueEffectuer le rendu lorsque nécessaire, sinon ne pas effectuer le rendu
v-else-ifRendre conditionnellement un élément, déterminé commetrueEffectuer le rendu lorsque nécessaire, sinon ne pas effectuer le rendu
v-showAfficher un élément en fonction des conditions. La différence est que le commutateur est.displayvaleur d'attribut
v-forRendu de liste, parcourant les éléments du conteneur ou les propriétés de l'objet
  • définition:HtmlÉtiqueté avecv-Les propriétés particulières du préfixe, différentes instructions ont des significations différentes.

v-bindv-model

  • v-bind: Lier les valeurs d'attribut aux balises HTML, telles que le paramètre href , cssstyle, etc.

    • Les exemples sont les suivants :

      <a v-bind:href="url">百度一下</a>
      
      • 1
    • peut être abrégé en

      <a :href="url">百度一下</a>
      
      • 1

      À l'avenir, tant que l'URL change, le correspondantv-bindLes valeurs des attributs changeront également immédiatement.

  • v-model:Créer une liaison de données bidirectionnelle sur les éléments du formulaire

    • Les exemples sont les suivants

      <input name="username" v-model="username"> 
      
      • 1
  • L'exemple complet est le suivant

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

    Insérer la description de l'image ici

v-on

  • v-on: Lier les événements aux balises HTML

  • Exemple : Un événement est lié à un clic sur un bouton et l'événement est exécutéshow()méthode, qui est écrite enmethodsin vivo

    • Qu'il s'agisse de la forme complète ou de la forme abrégée, si l'événement lié est une méthode, la méthode peut omettre les parenthèses.
    • Le formulaire complet est le suivant
    <input type="button" value="按钮" v-on:click="show()">
    <!--等同于如下形式-->
    <input type="button" value="按钮" v-on:click="show">
    
    • 1
    • 2
    • 3
    • La forme abrégée est la suivante
    <input type="button" value="按钮" @click="show()">
    <!--等同于如下形式-->
    <input type="button" value="按钮" @click="show">
    
    • 1
    • 2
    • 3
  • L'exemple de code complet est le suivant :

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

    Après avoir ouvert la page HTML via le navigateur, la capture d'écran en cours d'exécution est la suivante :

    Insérer la description de l'image ici

v-ifv-show

  • v-ifv-elsev-else-if: Restituez un élément de manière conditionnelle, restituez-le lorsqu'il est déterminé comme étant vrai, sinon ne le restituez pas.

    • Utilisés ensemble, ils sont équivalents à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
    • L'exemple de code complet est le suivant

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

      Une fois que le navigateur ouvre la page HTML, la capture d'écran est la suivante :

      Insérer la description de l'image ici

  • v-show: Afficher un élément en fonction de conditions

    • v-show etv-if L'effet est le même, mais le principe de mise en œuvre est différent :v-show Le principe de ne pas afficher est d'ajouter le tag correspondantdisplay css et définissez la valeur de l'attribut surnone,etv-ifCe n'est directement pasdivLes balises n'apparaîtront dans le code source que lorsque les conditions seront remplies.div Étiquette.Pour plus de détails, consultez la capture d’écran de l’exemple de code complet.
    <div v-show="count == 3">div4</div>
    
    • 1
  • L'exemple de code complet est le suivant

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

    Le navigateur ouvre le fichier HTML et la capture d'écran en cours d'exécution est la suivante :

    Insérer la description de l'image ici

    Insérer la description de l'image ici

    Insérer la description de l'image ici

v-for

  • v-for: Rendu de liste, parcourant les éléments du conteneur ou les propriétés de l'objet

  • Traverser le tableau de manière normale

    <div v-for="addr in addrs">
        {{addr}}<br>
    </div>
    
    • 1
    • 2
    • 3
  • Parcourir le tableau par index

    <div v-for="(addr,i) in addrs">
        {{i+1}}:{{addr}}<br>
    </div>
    
    • 1
    • 2
    • 3
  • exemple de code

    • Traverser le tableau de manière normale

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

      Insérer la description de l'image ici

    • Parcourir le tableau par index

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

      Insérer la description de l'image ici

Cycle de vie des vues

Étatcycle de scène
beforeCreateAvant la création
createdAprès la création
beforeMountavant de charger
mountedMontage terminé
beforeUpdateAvant la mise à jour
updatedMis à jour
beforeDestroyavant la destruction
destroyedAprès destruction
  • Il y a huit étapes dans le cycle de vie de Vue

    • Chaque fois qu'un événement du cycle de vie est déclenché, unméthodes de cycle de vie (également appelée méthode du crochet)
  • Voici la position de chaque cycle de vie

    Insérer la description de l'image ici

  • mounted: Montage terminé, initialisation de Vue réussie, rendu de la page HTML réussi

    • Nous pouvons envoyer une requête asynchrone dans cette méthode pour charger des données

    • Exemple simple

      new Vue({
          el:"#app",
          mounted() {
            alert("Vue挂载完毕,发送异步请求")  
          }
      });
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
  • Exemple de code complet

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

Cas Vue

Rechercher tout

Insérer la description de l'image ici

  • brand.htmlLes modifications apportées sont les suivantes

    Insérer la description de l'image ici

  • brand.htmlLes changements de code sont les suivants :

    • Introduire le fichier vue.js
    • Créer des objets principaux Vue pour la liaison de données
    • utilisermountedLa méthode envoie une requête asynchrone et interroge les données une fois la page chargée.
    <!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

    La capture d'écran après que Tomcat exécute le projet Web est la suivante

    Insérer la description de l'image ici

  • question

    • pourquoi seraitvar _this = this, pourquoi pas directementthis.brands=resp.data

      en Javascript this Le comportement d'un mot-clé dépend du contexte dans lequel il est appelé. Dans la méthode d'instance de Vue,this Pointe vers l'instance Vue elle-même.Mais dans Axiosthen Dans la fonction de rappel de la méthode,this Peut pointer vers d'autres objets, généralement l'objet global (dans les navigateurs, il s'agit dewindow objet). Cela vous empêchera d'accéder correctement aux propriétés et méthodes de l'instance Vue.

      par définition var _this = this, vous obtiendrez l'instance de Vue this économiser sur_this variable puis utilisez-la dans la fonction de rappel_this pour référencer correctement l'instance Vue.

Ajouter à

Insérer la description de l'image ici

  • addbrand.htmlLes modifications apportées sont les suivantes

    Insérer la description de l'image ici

  • brand.htmlLes changements de code sont les suivants :

    • Créez un nouveau bouton et associez-y un événement de clic
    <!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.htmlLe code est modifié comme suit :

    • introduirevue.jsdocument
    • Créer des objets principaux Vue pour la liaison de données
    • utiliserv-modelLes attributs sont créés sur les éléments du formulaireLiaison de données bidirectionnelle
    • Lier l'événement de clic au bouton de soumission
    <!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

    Une fois que Tomcat a exécuté le projet Web, la capture d'écran en cours d'exécution est la suivante

    Insérer la description de l'image ici

Élément

  • définition

    • Il s'agit d'un ensemble de bibliothèques de composants de sites Web basées sur Vue qui peuvent être utilisées pour créer rapidement des pages Web.
    • Composants : les composants qui composent une page Web, tels que des hyperliens, des boutons, des images, des tableaux, etc.
    • peut être basé surSite officiel de l'élémentétude
  • Avis:

    • Utilisé en démarrage rapideelement-uiTélécharger le site officielImpossible de télécharger, vous pouvez utiliser le code suivant pour le télécharger vous-même (vous pouvez modifier vous-même le chemin de téléchargement et l'URL de la version correspondante)
    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

ÉlémentDémarrage rapide

  • Étape 1: Introduire le fichier Vue.js

  • Étape 2: Volontéelement-uiLe répertoire est placé sous le répertoire principal du projet Web (c'est-à-dire webapp), puis importéelement-uifichiers css, js

    • Introduire les fichiers Element css et js locaux

      <!-- 引入样式 -->
      <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
      <!-- 引入组件库 -->
      <script src="element-ui/lib/index.js"></script>
      
      • 1
      • 2
      • 3
      • 4
    • Introduire les fichiers css et js de l'élément distant

      <!-- 引入样式 -->
      <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
  • Étape 3: Créez des objets de base Vue (voir la section Vue pour plus de détails)

  • Étape 4: ÉlémentSite officielCopiez le code du composant de l'élément

  • Le code de base de la structure de la page HTML est le suivant :

    <!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
  • L'exemple de code complet est le suivant

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

    Une fois que le navigateur ouvre le fichier HTML, la page se présente comme suit

    Insérer la description de l'image ici

Disposition des éléments

Mise en page

Insérer la description de l'image ici

  • Définition : Créez rapidement et facilement des mises en page avec une base de 24 colonnes

  • Explication : Il fournira de nombreuses lignes, chaque ligne comporte 24 grilles de base

    • Comme le montre la figure
      • Il n'y a qu'une seule grille dans la première rangée, mais cette grille occupe la largeur de 24 grilles de base
      • La deuxième rangée comporte deux cellules, chacune occupant la largeur de 12 cellules de base.
      • Il en va de même pour les lignes suivantes
  • étape:

    • Étape 1 : Présentez le fichier vue.js, le fichier index.css de l'élément et le fichier index.js

    • Étape 2 : Créer un objet principal Vue

    • Étape 3 : Copiez le code du composant souhaité sur le site officiel

      • allerRetrouvez le composant Layout sur le site officiel, en prenant la mise en page de base comme exemple, nous avons constaté que le code officiel inclut le code html et le code css, comme suit
      • <style>Le corps de la balise est du code de style CSS, que nous pouvons introduire en externe ou écrire directement dans la page 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
  • Exemple de code complet

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

    Ouvrez la page html via le navigateur, la capture d'écran est la suivante

    Insérer la description de l'image ici

Conteneur de présentation de conteneur

Insérer la description de l'image ici

  • Définition : composant conteneur utilisé pour la mise en page afin de faciliter la construction rapide de la structure de base de la page

  • Explication : Comme le montre l'image ci-dessus, il s'agit d'une mise en page avec une barre de navigation à gauche

  • étape:

    • Étape 1 : Présentez le fichier vue.js, le fichier index.css de l'élément et le fichier index.js

    • Étape 2 : Créer un objet principal Vue

    • Étape 3 : Copiez le code du composant souhaité sur le site officiel

      • Prenons l'exemple du premier cas, comme le montre la photo du site officiel

        Insérer la description de l'image ici

      • Dans cet exemple, en plus du code html et css, il existe également des attributs de l'objet Vue, comme suit

        <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

        Nous pouvons copier les propriétés de Vue dans l'instance du site Web officiel vers notre propre objet principal Vue, comme suit

        <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
  • Exemple de code complet

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

    Ouvrez la page html via le navigateur, la capture d'écran est la suivante

    Insérer la description de l'image ici

Cas d'élément

Créez l'effet comme indiqué ci-dessous

Insérer la description de l'image ici

Composant de table d'éléments

  • Étape 1: Accédez au site officiel et copiez l'exemple de formulaire correspondant (avecSite officiel avec formulaire de statutPar exemple), le code est le suivant :

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

    Une fois que le navigateur a ouvert la page HTML, comme le montre la figure, commencez à effectuer les ajustements après avoir obtenu une idée approximative.

    Insérer la description de l'image ici

  • Étape 2: Ajoutez des colonnes et des données au tableau obtenu à l'étape 1 et modifiez les noms des colonnes

    • supprimerwidthChaque colonne ajustera automatiquement sa largeur après l'attribut.

    • Centrer le contenu du tableau : faites défiler vers le bas la section des composants de tableau correspondant du site officiel pour trouver les méthodes et propriétés correspondantes, comme indiqué dans la figure.Définir les propriétésalign="center"

      Insérer la description de l'image ici

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

    Insérer la description de l'image ici

  • Étape 3: Ajouter une colonne d'action au tableau

    • Dans la colonne opération, il y a修改et删除bouton, rendez-vous sur le site officiel pour trouver le code du bouton correspondant, copiez-le et collez-le
    <!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

    Insérer la description de l'image ici

  • Étape 4: Ajouter un numéro de série au tableau : recherchez le tableau avec un numéro de série sur le site officiel et copiez le code pour ajouter le numéro de série.

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

    Insérer la description de l'image ici

  • Étape 5 : Ajouter une case à cocher à un tableau : recherchez le tableau avec une case à cocher et copiez le code de la case à cocher

    • Étant donné que les opérations par lots peuvent être effectuées sur la ligne de données après avoir coché la case dans le diagramme de cas, le tableau doit avoir une méthode, donc lorsque nous copions le code de la case à cocher, nous devons également copier le tableau avec la case à cocher Copier la méthode correspondante dans (n'oubliez pas d'écrire cette méthode dans l'objet core Vue), la méthode est la suivante

      handleSelectionChange(val) {
          this.multipleSelection = val;
      }
      
      • 1
      • 2
      • 3

      Cette méthode a une propriétémultipleSelection, nous devons donc copier cet attribut dans notre propre code. Le code final complet est le suivant :

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

    Insérer la description de l'image ici

    • Ajoutez une sortie à la méthode checkbox et testez pour voir si elle réussit. Le code est le suivant.

      handleSelectionChange(val) {
          this.multipleSelection = val;
          console.log(this.multipleSelection)
      }
      
      • 1
      • 2
      • 3
      • 4

      Après avoir ouvert la page dans le navigateur, ouvrez les outils de développement → sélectionnez le contrôleur de console pour afficher la sortie, comme indiqué dans la figure

      Insérer la description de l'image ici

Composant de formulaire d'élément

  • Étape 6 : Ajouter un formulaire : le formulaire dans le diagramme de cas est horizontal, nous trouvons donc un formulaire similaire (c'est-à-dire un formulaire en ligne) sur le site officiel et copions le code. Le code est le suivant.

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

    Insérer la description de l'image ici

  • Étape 7 : Modifier le formulaire pour être cohérent avec le diagramme de cas, le code est le suivant

    • Lors de la modification du nom du formulaire, assurez-vous de modifier la valeur de l'attribut v-model et la valeur de l'attribut dans l'objet Vue par le nom correspondant.
    <!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

    Insérer la description de l'image ici

Boîtes de dialogue et formulaires d'éléments

Insérer la description de l'image ici

Les boîtes de dialogue et les formulaires apparaissent en cliquant sur le bouton Ajouter. Nous devons donc les ajouter avant de créer des boîtes de dialogue et des formulaires.批量删除et新增deux boutons

  • Étape 8 : Ajouter à批量删除et新增bouton, ajouter une boîte de dialogue

    Recherchez le composant de la boîte de dialogue sur le site officiel. Ici, nous prenons comme exemple une utilisation de base de la boîte de dialogue et copions son code.

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

    Insérer la description de l'image ici

  • Étape 9 : Ajoutez un formulaire à la boîte de dialogue, le code est le suivant

    • Recherchez le composant de formulaire sur le site officiel et modifiez-le
    <!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

    Insérer la description de l'image ici

  • Étape 10 : Les étapes sont les suivantes et le code est le suivant

    • Donner新增Événement de clic de liaison de bouton, tant qu'un clic新增Le bouton fait apparaître le formulaire de dialogue
    • Changer le formulaire qui l'accompagne提交La méthode correspondant à l'événement click lié au bouton : Changez la méthode enaddBrand, tant que vous cliquez sur le bouton, le formulaire de dialogue est automatiquement soumis.
    • La boîte de dialogue est livrée avec确定取消bouton supprimer
    • Livré avec le formulaire取消Le bouton est lié à un événement de clic. Tant que le bouton est cliqué, le formulaire de dialogue disparaît.
    • Le modèle lié au formulaire estform(Tout de suitemodel="form"), changez sa valeur d'attribut enbrand, et complétez les données dans l'objet marque
    • Réglez le commutateur d'état sur 0 ou 1 : recherchez le composant de commutateur correspondant sur le site officiel, puis définissez la valeur de l'attribut sur 0 ou 1 en fonction des attributs correspondants.
    <!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

    Insérer la description de l'image ici

Barre d'outils de pagination des éléments

  • Étape 11 : Accédez au site officiel pour trouver le composant de pagination, copiez le code correspondant et apportez les modifications correspondantes. Le code est le suivant :

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

    Insérer la description de l'image ici