Condivisione della tecnologia

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

2024-07-12

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

Vista

  • definizione

    • Vue è un framework front-end in grado di eliminare le operazioni DOM in JavaScript nativo e semplificare la scrittura.

      • Il framework MyBatis che ho imparato in precedenza viene utilizzato per semplificare la scrittura del codice JDBC mentre Vue è un framework front-end utilizzato per semplificare la scrittura del codice JavaScript;

      • Aggiunta di casi completi in Axios e JSONEsistono numerose operazioni DOM in , gli esempi sono i seguenti:

        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
    • Si basa sull'idea di MVVM (Model-View-ViewModel) e può realizzare datiRilegatura bidirezionale , concentrare la programmazione sui dati

      • Nota: il modello MVC appreso in precedenza può ottenere solo una visualizzazione unidirezionale da modello a vista e non può associare la vista e il modello tra loro (ovvero, finché uno tra il modello e la vista cambia, anche l'altro lo farà modifica)

      Inserisci qui la descrizione dell'immagine

    • Puoi farlo da soloSito ufficialestudio

Avvio rapido con Vue

  • Crea una nuova pagina HTML e importalaVue.jsdocumento

    • Se introduci file Vue locali (il blogger utilizza l'ultima versione di VUE2:Vue2.7.16开发环境, puoi andare al sito ufficiale per scaricare il file corrispondentejsdocumento)

      <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
      
      • 1
    • Se introduci il servizio Vue fornito dal pacchetto remote npm

      • sviluppo dell'ambiente

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        
        • 1
      • Ambiente di produzione

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        
        • 1
  • Nell'area del codice JS (in<Script>tag body), creare oggetti core Vue per l'associazione dati

    • Quando crei un oggetto Vue, devi passare un oggetto js e nell'oggetto sono richieste le seguenti proprietà:

      Attributispiegare
      el Specificare quali tag sono gestiti da Vue. Il valore di questo attributo#app mezzoapp Per i tag gestiti da Vueidvalore dell'attributo
      datautilizzato per definire i tipi di dati
      methodsFunzione utilizzata per la definizione, il valore della funzione può essere restituito tramite return
      new Vue({
          el:"#app",
          data() {
              return {
                  username : ""
              }
          }
      });
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
  • Scrittura viste (codice Html)

    • Nell'esempio seguentedivEtichettatoidPer l'app viene creato l'oggetto Vue corrispondente.elvalore dell'attributo
    • <input>Label crea una casella di input conv-modelProprietà per associare in modo bidirezionale la casella di input al modello Vue
      • Inv-modelIl valore dell'attributo corrisponde all'oggetto Vue creato.returnI nomi dei modelli tra parentesi sono coerenti
    • {{}}È definito in Vue espressione di interpolazione , utilizzato per ottenere i dati nel modello
    <div id="app">
        <input name="username" v-model="username">
        {{username}}
    </div>
    
    • 1
    • 2
    • 3
    • 4
  • Il codice completo del file vueDemo1.html è il seguente

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

    Dopo che il browser ha aperto la pagina html, lo screenshot in esecuzione è il seguente

    Inserisci qui la descrizione dell'immagine

Direttiva Vue

istruzioneeffetto
v-bindAssocia i valori degli attributi ai tag HTML, come l'impostazione href , cssstile ecc.
v-modelCrea associazione dati bidirezionale sugli elementi del modulo
v-onAssocia eventi a tag HTML
v-ifRendere condizionalmente un elemento, determinato cometrueEseguire il rendering quando richiesto, altrimenti non eseguire il rendering
v-elseRendere condizionalmente un elemento, determinato cometrueEseguire il rendering quando richiesto, altrimenti non eseguire il rendering
v-else-ifRendere condizionalmente un elemento, determinato cometrueEseguire il rendering quando richiesto, altrimenti non eseguire il rendering
v-showVisualizza un elemento in base alle condizioni La differenza è che ciò che viene commutato lo èdisplayvalore dell'attributo
v-forRendering di elenchi, attraversando gli elementi del contenitore o le proprietà dell'oggetto
  • definizione:HtmlEtichettato conv-Le proprietà speciali del prefisso, le diverse istruzioni hanno significati diversi.

v-bindv-model

  • v-bind: associa i valori degli attributi ai tag HTML, come setting href , cssstile ecc.

    • Gli esempi sono i seguenti:

      <a v-bind:href="url">百度一下</a>
      
      • 1
    • può essere abbreviato come

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

      In futuro, finché l'URL cambia, il file corrispondentev-bindAnche i valori degli attributi cambieranno immediatamente.

  • v-model:Crea associazione dati bidirezionale sugli elementi del modulo

    • Gli esempi sono i seguenti

      <input name="username" v-model="username"> 
      
      • 1
  • L'esempio completo è il seguente

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

    Inserisci qui la descrizione dell'immagine

v-on

  • v-on: associa gli eventi ai tag Html

  • Esempio: un evento è associato al clic di un pulsante e l'evento viene eseguitoshow()metodo, che è scritto inmethodsin vivo

    • Indipendentemente dalla forma completa o da quella abbreviata, se l'evento associato è un metodo, il metodo può omettere le parentesi.
    • Il modulo completo è il seguente
    <input type="button" value="按钮" v-on:click="show()">
    <!--等同于如下形式-->
    <input type="button" value="按钮" v-on:click="show">
    
    • 1
    • 2
    • 3
    • La forma abbreviata è la seguente
    <input type="button" value="按钮" @click="show()">
    <!--等同于如下形式-->
    <input type="button" value="按钮" @click="show">
    
    • 1
    • 2
    • 3
  • L'esempio di codice completo è il seguente:

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

    Dopo aver aperto la pagina html tramite il browser, lo screenshot in esecuzione è il seguente:

    Inserisci qui la descrizione dell'immagine

v-ifv-show

  • v-ifv-elsev-else-if: Visualizza in modo condizionale un elemento, visualizzalo quando viene determinato che è vero, altrimenti non visualizzalo.

    • Usati insieme equivalgono aif-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'esempio di codice completo è il seguente

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

      Dopo che il browser apre la pagina html, lo screenshot è il seguente:

      Inserisci qui la descrizione dell'immagine

  • v-show: Visualizza un elemento in base alle condizioni

    • v-show Ev-if L’effetto è lo stesso, ma il principio di attuazione è diverso:v-show Il principio per non visualizzare è aggiungere il tag corrispondentedisplay css e impostare il valore dell'attributo sunone,Ev-ifNon lo è direttamentedivI tag appariranno nel codice sorgente solo quando le condizioni sono soddisfatte.div Etichetta.Per i dettagli, vedere lo screenshot dell'esempio di codice completo.
    <div v-show="count == 3">div4</div>
    
    • 1
  • L'esempio di codice completo è il seguente

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

    Il browser apre il file html e lo screenshot in esecuzione è il seguente:

    Inserisci qui la descrizione dell'immagine

    Inserisci qui la descrizione dell'immagine

    Inserisci qui la descrizione dell'immagine

v-for

  • v-for: Elenco rendering, attraversando gli elementi del contenitore o le proprietà dell'oggetto

  • Attraversa l'array in modo normale

    <div v-for="addr in addrs">
        {{addr}}<br>
    </div>
    
    • 1
    • 2
    • 3
  • Attraversa l'array per indice

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

    • Attraversa l'array in modo 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

      Inserisci qui la descrizione dell'immagine

    • Attraversa l'array per indice

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

      Inserisci qui la descrizione dell'immagine

Ciclo di vita di Vue

statociclo scenico
beforeCreatePrima della creazione
createdDopo la creazione
beforeMountprima del caricamento
mountedMontaggio completato
beforeUpdatePrima dell'aggiornamento
updatedAggiornato
beforeDestroyprima della distruzione
destroyedDopo la distruzione
  • Ci sono otto fasi nel ciclo di vita di Vue

    • Ogni volta che viene attivato un evento del ciclo di vita, ametodi del ciclo di vita (chiamato anche metodo hook)
  • Quella che segue è la posizione di ciascun ciclo di vita

    Inserisci qui la descrizione dell'immagine

  • mounted: Montaggio completato, Inizializzazione Vue riuscita, Rendering della pagina Html riuscito

    • Possiamo inviare una richiesta asincrona con questo metodo per caricare i dati

    • Esempio semplice

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

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

Caso Vue

  • Obiettivo: utilizzare Vue per semplificare la query sul marchio e aggiungere funzioni
  • Questo caso inizia conCaso completo di Axios e JSONSulla base di ciò, questo progetto si chiama:VueDemo, è stato caricato su Gitee e puòScaricalo da solo

Cerca tutto

Inserisci qui la descrizione dell'immagine

  • brand.htmlLe modifiche apportate sono le seguenti

    Inserisci qui la descrizione dell'immagine

  • brand.htmlLe modifiche al codice sono le seguenti:

    • Introdurre il file vue.js
    • Crea oggetti core Vue per l'associazione dati
    • utilizzomountedIl metodo invia una richiesta asincrona ed esegue una query sui dati dopo il caricamento della pagina.
    <!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

    Lo screenshot dopo che Tomcat ha eseguito il progetto Web è il seguente

    Inserisci qui la descrizione dell'immagine

  • domanda

    • perché sarebbevar _this = this, perché non direttamentethis.brands=resp.data

      in JavaScript this Il comportamento di una parola chiave dipende dal contesto in cui viene chiamata. Nel metodo di istanza di Vue,this Punta all'istanza Vue stessa.Ma ad Axiosthen Nella funzione di callback del metodo,this Può puntare ad altri oggetti, solitamente l'oggetto globale (nei browser questo èwindow oggetto). Ciò impedirà l'accesso corretto alle proprietà e ai metodi dell'istanza Vue.

      per definizione var _this = this, avrai l'istanza Vue this salva a_this variabile e quindi utilizzarla nella funzione di callback_this per fare riferimento correttamente all'istanza Vue.

aggiungere a

Inserisci qui la descrizione dell'immagine

  • addbrand.htmlLe modifiche apportate sono le seguenti

    Inserisci qui la descrizione dell'immagine

  • brand.htmlLe modifiche al codice sono le seguenti:

    • Crea un nuovo pulsante e associa ad esso un evento 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.htmlIl codice viene modificato come segue:

    • introdurrevue.jsdocumento
    • Crea oggetti core Vue per l'associazione dati
    • utilizzov-modelGli attributi vengono creati sugli elementi del moduloAssociazione dati bidirezionale
    • Associa l'evento clic al pulsante di invio
    <!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

    Dopo che Tomcat ha eseguito il progetto Web, lo screenshot in esecuzione è il seguente

    Inserisci qui la descrizione dell'immagine

Elemento

  • definizione

    • Si tratta di un insieme di librerie di componenti di siti Web basate su Vue che possono essere utilizzate per creare rapidamente pagine Web.
    • Componenti: i componenti che compongono una pagina web, come collegamenti ipertestuali, pulsanti, immagini, tabelle, ecc.
    • può essere basato suSito ufficiale dell'Elementstudio
  • Avviso:

    • Utilizzato nell'avvio rapidoelement-uiScarica il sito ufficialeImpossibile scaricarlo, puoi utilizzare il seguente codice per scaricarlo tu stesso (puoi modificare tu stesso il percorso di download e l'URL della versione corrispondente)
    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

ElementoAvvio rapido

  • Passo 1: Introdurre il file Vue.js

  • Passo 2: Volereelement-uiLa directory viene inserita nella directory principale del progetto Web (ovvero webapp) e quindi importataelement-uifile css, js

    • Introduci i file Element css e js locali

      <!-- 引入样式 -->
      <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
      <!-- 引入组件库 -->
      <script src="element-ui/lib/index.js"></script>
      
      • 1
      • 2
      • 3
      • 4
    • Introduci i file css e js dell'Elemento remoto

      <!-- 引入样式 -->
      <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
  • Fase 3: Crea oggetti core Vue (vedi la sezione Vue per i dettagli)

  • Fase 4: ElementoSito ufficialeCopia il codice del componente Element

  • Il codice base della struttura della pagina html è il seguente:

    <!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'esempio di codice completo è il seguente

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

    Dopo che il browser ha aperto il file html, la pagina appare come segue

    Inserisci qui la descrizione dell'immagine

Disposizione degli elementi

Disposizione della disposizione

Inserisci qui la descrizione dell'immagine

  • Definizione: crea rapidamente e facilmente layout con 24 colonne di base

  • Spiegazione: fornirà molte righe, ogni riga ha 24 griglie di base

    • Come mostrato nella FIG
      • C'è solo una griglia nella prima riga, ma questa griglia occupa la larghezza di 24 griglie di base
      • La seconda riga ha due celle, ciascuna delle quali occupa la larghezza di 12 celle base.
      • Lo stesso vale per le righe successive
  • fare un passo:

    • Passaggio 1: introdurre il file vue.js, il file indice.css dell'elemento e il file indice.js

    • Passaggio 2: crea l'oggetto principale Vue

    • Passaggio 3: copia il codice del componente desiderato dal sito Web ufficiale

      • andareTrova il componente Layout sul sito ufficiale, prendendo come esempio il layout base, abbiamo scoperto che il codice ufficiale comprende codice html e codice css, come segue
      • <style>Il corpo del tag contiene codice in stile css, che possiamo introdurre esternamente o scrivere direttamente nella pagina 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
  • Esempio di codice completo

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

    Apri la pagina html tramite il browser, lo screenshot è il seguente

    Inserisci qui la descrizione dell'immagine

Contenitore di layout del contenitore

Inserisci qui la descrizione dell'immagine

  • Definizione: componente contenitore utilizzato per il layout per facilitare la costruzione rapida della struttura di base della pagina

  • Spiegazione: come mostrato nell'immagine sopra, è un layout con una barra di navigazione a sinistra

  • fare un passo:

    • Passaggio 1: introdurre il file vue.js, il file indice.css dell'elemento e il file indice.js

    • Passaggio 2: crea l'oggetto principale Vue

    • Passaggio 3: copia il codice del componente desiderato dal sito Web ufficiale

      • Prendiamo come esempio il primo caso, come mostrato nell'immagine del sito ufficiale

        Inserisci qui la descrizione dell'immagine

      • In questo esempio, oltre al codice html e css, sono presenti anche gli attributi dell'oggetto Vue, come segue

        <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

        Possiamo copiare le proprietà di Vue nell'istanza del sito Web ufficiale nel nostro oggetto principale Vue, come segue

        <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
  • Esempio di codice completo

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

    Apri la pagina html tramite il browser, lo screenshot è il seguente

    Inserisci qui la descrizione dell'immagine

Caso dell'elemento

Realizza l'effetto come mostrato di seguito

Inserisci qui la descrizione dell'immagine

  • Nota: ogni passaggio di questo caso è stato caricato su Gitee e può essereScaricalo da solo

Componente della tabella degli elementi

  • Passo 1: Vai al sito ufficiale e copia l'esempio corrispondente del modulo (conSito ufficiale con modulo di statoAd esempio), il codice è il seguente:

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

    Dopo che il browser ha aperto la pagina html, come mostrato nella figura, inizia ad apportare modifiche dopo aver ottenuto l'immagine approssimativa.

    Inserisci qui la descrizione dell'immagine

  • Passo 2: Aggiungi colonne e dati alla tabella ottenuta nel passaggio 1 e modifica i nomi delle colonne

    • eliminarewidthOgni colonna regolerà automaticamente la sua larghezza dopo l'attributo.

    • Centrare il contenuto della tabella: scorrere verso il basso nella sezione corrispondente dei componenti della tabella del sito Web ufficiale per trovare i metodi e le proprietà corrispondenti, come mostrato nella figura.Imposta proprietàalign="center"

      Inserisci qui la descrizione dell'immagine

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

    Inserisci qui la descrizione dell'immagine

  • Fase 3: Aggiungi una colonna di azioni alla tabella

    • Nella colonna delle operazioni ci sono修改E删除pulsante, vai al sito ufficiale per trovare il codice del pulsante corrispondente, copialo e incollalo
    <!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

    Inserisci qui la descrizione dell'immagine

  • Fase 4: Aggiungi un numero di serie alla tabella: trova la tabella con un numero di serie sul sito ufficiale e copia il codice per aggiungere il numero di serie.

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

    Inserisci qui la descrizione dell'immagine

  • Fase 5: Aggiungi una casella di controllo a una tabella: trova la tabella con una casella di controllo e copia il codice per la casella di controllo

    • Poiché è possibile eseguire operazioni batch sulla riga di dati dopo aver selezionato la casella di controllo nel diagramma del caso, la tabella deve avere un metodo, quindi quando copiamo il codice per la casella di controllo, dobbiamo copiare anche la tabella con la casella di controllo Copia il metodo corrispondente in (non dimenticare di scrivere questo metodo nell'oggetto core Vue), il metodo è il seguente

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

      Questo metodo ha una proprietàmultipleSelection, quindi dobbiamo copiare questo attributo nel nostro codice. Il codice completo finale è il seguente:

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

    Inserisci qui la descrizione dell'immagine

    • Aggiungi l'output al metodo della casella di controllo e verifica se ha esito positivo. Il codice è il seguente

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

      Dopo aver aperto la pagina nel browser, aprire gli strumenti per sviluppatori → selezionare il controller della Console per visualizzare l'output, come mostrato in figura

      Inserisci qui la descrizione dell'immagine

Componente del modulo elemento

  • Fase 6: Aggiungi un modulo: il modulo nel diagramma del case è orizzontale, quindi troviamo un modulo simile (ovvero il modulo in linea) sul sito ufficiale e copiamo il codice

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

    Inserisci qui la descrizione dell'immagine

  • Fase 7: Modificare il modulo per renderlo coerente con il diagramma del caso, il codice è il seguente

    • Quando modifichi il nome del modulo, assicurati di modificare il valore dell'attributo v-model e il valore dell'attributo nell'oggetto Vue con il nome corrispondente.
    <!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

    Inserisci qui la descrizione dell'immagine

Finestre di dialogo e moduli degli elementi

Inserisci qui la descrizione dell'immagine

Le finestre di dialogo e i moduli vengono visualizzati facendo clic sul pulsante Aggiungi, quindi dobbiamo aggiungerli prima di creare finestre di dialogo e moduli.批量删除E新增due pulsanti

  • Fase 8: aggiungere a批量删除E新增pulsante, aggiungi finestra di dialogo

    Trova il componente della finestra di dialogo sul sito Web ufficiale Qui prendiamo come esempio un utilizzo di base della finestra di dialogo e ne copiamo il codice.

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

    Inserisci qui la descrizione dell'immagine

  • Fase 9: Aggiungi un modulo alla finestra di dialogo, il codice è il seguente

    • Trova il componente del modulo sul sito ufficiale e modificalo
    <!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

    Inserisci qui la descrizione dell'immagine

  • Fase 10: I passaggi sono i seguenti e il codice è il seguente

    • Dare新增Evento clic di associazione del pulsante, purché un clic新增Il pulsante apre il modulo di dialogo
    • Cambia il modulo che lo accompagna提交Il metodo corrispondente all'evento clic associato al pulsante: cambia il metodo inaddBrand, finché si fa clic sul pulsante, il modulo di dialogo viene inviato automaticamente.
    • La finestra di dialogo viene fornita con确定取消pulsante Elimina
    • Viene fornito con il modulo取消Il pulsante è associato a un evento clic. Finché si fa clic sul pulsante, il modulo di dialogo scompare.
    • Il modello associato al modulo èform(Proprio adessomodel="form"), modificare il valore dell'attributo inbrande completare i dati nell'oggetto del brand
    • Imposta l'interruttore di stato su 0 o 1: trova il componente interruttore corrispondente sul sito Web ufficiale, quindi imposta il valore dell'attributo su 0 o 1 in base agli attributi corrispondenti.
    <!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

    Inserisci qui la descrizione dell'immagine

Barra degli strumenti di impaginazione degli elementi

  • Fase 11: Vai al sito web ufficiale per trovare il componente di paging, copia il codice corrispondente e apporta le modifiche corrispondenti. Il codice è il seguente:

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

    Inserisci qui la descrizione dell'immagine