Compartir tecnología

Grandes datos------JavaWeb------Vue

2024-07-12

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

Vista

  • definición

    • Vue es un marco de interfaz de usuario que puede eliminar las operaciones DOM en JavaScript nativo y simplificar la escritura.

      • El marco MyBatis que aprendí antes se usa para simplificar la escritura de código JDBC, mientras que Vue es un marco de interfaz de usuario que se usa para simplificar la escritura de código JavaScript;

      • Agregar casos completos en Axios y JSONHay una gran cantidad de operaciones DOM, los ejemplos son los siguientes:

        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
    • Se basa en la idea de MVVM (Model-View-ViewModel) y puede realizar datos.Encuadernación bidireccional , centrar la programación en datos

      • Nota: El patrón MVC aprendido antes solo puede realizar una visualización unidireccional del modelo a la vista, y no puede vincular la vista y el modelo entre sí (es decir, siempre que uno de los modelos y la vista cambie, el otro también lo hará). cambiar)

      Insertar descripción de la imagen aquí

    • Puede hacerlo usted mismoPágina web oficialestudiar

Inicio rápido con Vue

  • Crea una nueva página HTML e impórtalaVue.jsdocumento

    • Si introduce archivos Vue locales (el blogger usa la última versión de VUE2:Vue2.7.16开发环境, puede ir al sitio web oficial para descargar el correspondientejsdocumento)

      <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
      
      • 1
    • Si introduce el servicio Vue proporcionado por el paquete npm remoto

      • entorno de desarrollo

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

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        
        • 1
  • En el área del código JS (en<Script>cuerpo de la etiqueta), cree objetos principales de Vue para el enlace de datos

    • Al crear un objeto Vue, debe pasar un objeto js y se requieren las siguientes propiedades en el objeto:

      Atributosexplicar
      el Especifique qué etiquetas administra Vue. El valor de este atributo.#app medioapp Para etiquetas administradas por Vueidvalor de atributo
      datautilizado para definir tipos de datos
      methodsFunción utilizada para la definición, el valor de la función se puede devolver mediante return
      new Vue({
          el:"#app",
          data() {
              return {
                  username : ""
              }
          }
      });
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
  • Vistas de escritura (código HTML)

    • En el siguiente ejemplodivEtiquetadoidPara la aplicación, se crea el objeto Vue correspondiente.elvalor de atributo
    • <input>La etiqueta crea un cuadro de entrada conv-modelPropiedades para vincular bidireccionalmente el cuadro de entrada al modelo Vue
      • env-modelEl valor del atributo corresponde al objeto Vue creado.returnLos nombres de los modelos entre paréntesis son consistentes.
    • {{}}Está definido en Vue. expresión de interpolación , utilizado para obtener los datos en el modelo.
    <div id="app">
        <input name="username" v-model="username">
        {{username}}
    </div>
    
    • 1
    • 2
    • 3
    • 4
  • El código completo del archivo vueDemo1.html es el siguiente

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

    Después de que el navegador abre la página html, la captura de pantalla en ejecución es la siguiente

    Insertar descripción de la imagen aquí

directiva de vista

instrucciónefecto
v-bindVincular valores de atributos a etiquetas HTML, como la configuración href , cssestilo, etc.
v-modelCrear enlace de datos bidireccional en elementos de formulario
v-onVincular eventos a etiquetas HTML
v-ifRepresentar condicionalmente un elemento, determinado comotrueRenderizar cuando sea necesario; de lo contrario, no renderizar
v-elseRepresentar condicionalmente un elemento, determinado comotrueRenderizar cuando sea necesario; de lo contrario, no renderizar
v-else-ifRepresentar condicionalmente un elemento, determinado comotrueRenderizar cuando sea necesario; de lo contrario, no renderizar
v-showMostrar un elemento según las condiciones. La diferencia es que el interruptor es.displayvalor de atributo
v-forRepresentación de listas, atravesando los elementos del contenedor o las propiedades del objeto.
  • definición:HtmlEtiquetado conv-Las propiedades especiales del prefijo, diferentes instrucciones tienen diferentes significados.

v-bindv-model

  • v-bind: Vincular valores de atributos a etiquetas HTML, como la configuración href , cssestilo, etc.

    • Los ejemplos son los siguientes:

      <a v-bind:href="url">百度一下</a>
      
      • 1
    • se puede abreviar como

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

      En el futuro, siempre que la URL cambie, la correspondientev-bindLos valores de los atributos también cambiarán inmediatamente.

  • v-model:Crear enlace de datos bidireccional en elementos de formulario

    • Los ejemplos son los siguientes

      <input name="username" v-model="username"> 
      
      • 1
  • El ejemplo completo es el siguiente

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

    Insertar descripción de la imagen aquí

v-on

  • v-on: Vincular eventos a etiquetas HTML

  • Ejemplo: un evento está vinculado al clic de un botón y el evento se ejecutashow()método, que está escrito enmethodsen vivo

    • Independientemente de si se trata de la forma completa o abreviada, si el evento vinculado es un método, el método puede omitir los paréntesis.
    • El formulario completo es el siguiente
    <input type="button" value="按钮" v-on:click="show()">
    <!--等同于如下形式-->
    <input type="button" value="按钮" v-on:click="show">
    
    • 1
    • 2
    • 3
    • La forma abreviada es la siguiente.
    <input type="button" value="按钮" @click="show()">
    <!--等同于如下形式-->
    <input type="button" value="按钮" @click="show">
    
    • 1
    • 2
    • 3
  • El ejemplo de código completo es el siguiente:

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

    Después de abrir la página html a través del navegador, la captura de pantalla en ejecución es la siguiente:

    Insertar descripción de la imagen aquí

v-ifv-show

  • v-ifv-elsev-else-if: Representa un elemento de forma condicional, lo representa cuando se determina que es verdadero; de lo contrario, no lo representa.

    • Usados ​​juntos equivalen 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
    • El ejemplo de código completo es el siguiente

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

      Después de que el navegador abre la página html, la captura de pantalla es la siguiente:

      Insertar descripción de la imagen aquí

  • v-show: Muestra un elemento según las condiciones.

    • v-show yv-if El efecto es el mismo, pero el principio de implementación es diferente:v-show El principio de no mostrar es agregar la etiqueta correspondiente.display atributo css y establezca el valor del atributo ennone,yv-ifEs directamente nodivLas etiquetas aparecerán en el código fuente sólo cuando se cumplan las condiciones.div Etiqueta.Para obtener más información, consulte la captura de pantalla del ejemplo de código completo.
    <div v-show="count == 3">div4</div>
    
    • 1
  • El ejemplo de código completo es el siguiente

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

    El navegador abre el archivo html y la captura de pantalla en ejecución es la siguiente:

    Insertar descripción de la imagen aquí

    Insertar descripción de la imagen aquí

    Insertar descripción de la imagen aquí

v-for

  • v-for: Representación de listas, atravesando los elementos del contenedor o las propiedades del objeto.

  • Atravesar la matriz de forma normal.

    <div v-for="addr in addrs">
        {{addr}}<br>
    </div>
    
    • 1
    • 2
    • 3
  • Atravesar matriz por índice

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

    • Atravesar la matriz de forma normal.

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

      Insertar descripción de la imagen aquí

    • Atravesar matriz por índice

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

      Insertar descripción de la imagen aquí

ciclo de vida de vue

estadociclo de etapas
beforeCreateAntes de la creación
createdDespués de la creación
beforeMountAntes de cargar
mountedMontaje completado
beforeUpdateAntes de la actualización
updatedActualizado
beforeDestroyantes de la destrucción
destroyedDespués de la destrucción
  • Hay ocho etapas en el ciclo de vida de Vue.

    • Cada vez que se desencadena un evento del ciclo de vida,métodos del ciclo de vida (también llamado método de gancho)
  • La siguiente es la posición de cada ciclo de vida.

    Insertar descripción de la imagen aquí

  • mounted: Montaje completado, inicialización de Vue exitosa, representación de página HTML exitosa

    • Podemos enviar una solicitud asincrónica en este método para cargar datos.

    • Ejemplo sencillo

      new Vue({
          el:"#app",
          mounted() {
            alert("Vue挂载完毕,发送异步请求")  
          }
      });
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
  • Ejemplo de código 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 vista

Busca todo

Insertar descripción de la imagen aquí

  • brand.htmlLos cambios realizados son los siguientes

    Insertar descripción de la imagen aquí

  • brand.htmlLos cambios de código son los siguientes:

    • Introducir el archivo vue.js
    • Cree objetos principales de Vue para el enlace de datos
    • usarmountedEl método envía una solicitud asincrónica y consulta los datos después de cargar la página.
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="app">
                <table border="1" cellspacing="0">
                    <tr>
                        <th>序号</th>
                        <th>品牌名称</th>
                        <th>企业名称</th>
                        <th>排序</th>
                        <th>品牌介绍</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    <!--使用v-for循环遍历-->
                    <tr v-for="(brand,i) in brands" align="center">
                        <td>{{i + 1}}</td>
                        <td>{{brand.brandName}}</td>
                        <td>{{brand.companyName}}</td>
                        <td>{{brand.ordered}}</td>
                        <td>{{brand.description}}</td>
                        <td>{{brand.status == 1 ? "启用" : "禁用"}}</td>
                        <td><a href="#">修改</a><a href="#">删除</a></td>
                    </tr>
                </table>
            </div>
            <script src="js/axios-0.18.0.js"></script>
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <script>
                new Vue({
                    el: "#app",
                    data() {
                        return {
                            brands:[]
                        }
                    },
                    // 页面加载完成后利用mounted方法发送异步请求并查询数据
                    mounted() {
                        // 发送异步请求并查询数据
                        // 在Vue的实例方法中,this指向Vue实例本身
                        var _this = this;
                        axios({
                            method:"get",
                            url:"http://localhost:8080/VueDemo/selectAllServlet"
                        }).then(function (resp) {
                            // 获取响应数据,并将数据赋给brands
                            // 错误写法:this.brands = resp.data;
                            /* 在Axios的then方法的回调函数中,this可能指向其他对象,通常是全局对象(在浏览器中是 window 对象)
                                所以需要提前将代指Vue示例本身的this赋给_this
                             */
                            //axios会自动将获取的JSON字符串数据转为js对象数组
                            _this.brands = resp.data;
                        })
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62

    La captura de pantalla después de que Tomcat ejecute el proyecto web es la siguiente

    Insertar descripción de la imagen aquí

  • pregunta

    • ¿por qué lo haría?var _this = this, ¿por qué no directamente?this.brands=resp.data

      en JavaScript this El comportamiento de una palabra clave depende del contexto en el que se llama. En el método de instancia de Vue,this Apunta a la propia instancia de Vue.Pero en Axiosthen En la función de devolución de llamada del método,this Puede apuntar a otros objetos, generalmente el objeto global (en los navegadores esto eswindow objeto). Esto hará que no pueda acceder correctamente a las propiedades y métodos de la instancia de Vue.

      por definición var _this = this, accederá a la instancia de Vue this guardar en_this variable y luego usarla en la función de devolución de llamada_this para hacer referencia correctamente a la instancia de Vue.

añadir

Insertar descripción de la imagen aquí

  • addbrand.htmlLos cambios realizados son los siguientes

    Insertar descripción de la imagen aquí

  • brand.htmlLos cambios de código son los siguientes:

    • Cree un nuevo botón y vincúlele un evento de clic
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="app">
                <!--给新增按钮绑定单击事件-->
                <input type="button" value="新增" v-on:click="addBrand()"><br>
                <hr>
                <table border="1" cellspacing="0">
                    <tr>
                        <th>序号</th>
                        <th>品牌名称</th>
                        <th>企业名称</th>
                        <th>排序</th>
                        <th>品牌介绍</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    <!--使用v-for循环遍历-->
                    <tr v-for="(brand,i) in brands" align="center">
                        <td>{{i + 1}}</td>
                        <td>{{brand.brandName}}</td>
                        <td>{{brand.companyName}}</td>
                        <td>{{brand.ordered}}</td>
                        <td>{{brand.description}}</td>
                        <td>{{brand.status == 1 ? "启用" : "禁用"}}</td>
                        <td><a href="#">修改</a><a href="#">删除</a></td>
                    </tr>
                </table>
            </div>
            <script src="js/axios-0.18.0.js"></script>
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <script>
                new Vue({
                    el: "#app",
                    data() {
                        return {
                            brands:[]
                        }
                    },
                    methods:{
                      addBrand() {
                          location.href = "/VueDemo/addBrand.html";
                      }
                    },
                    // 页面加载完成后利用mounted方法发送异步请求并查询数据
                    mounted() {
                        // 发送异步请求并查询数据
                        // 在Vue的实例方法中,this指向Vue实例本身
                        var _this = this;
                        axios({
                            method:"get",
                            url:"http://localhost:8080/VueDemo/selectAllServlet"
                        }).then(function (resp) {
                            // 获取响应数据,并将数据赋给brands
                            // 错误写法:this.brands = resp.data;
                            /* 在Axios的then方法的回调函数中,this可能指向其他对象,通常是全局对象(在浏览器中是 window 对象)
                                所以需要提前将代指Vue示例本身的this赋给_this
                             */
                            //axios会自动将获取的JSON字符串数据转为js对象数组
                            _this.brands = resp.data;
                        })
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
  • addBrand.htmlEl código se modifica de la siguiente manera:

    • introducirvue.jsdocumento
    • Cree objetos principales de Vue para el enlace de datos
    • usarv-modelLos atributos se crean en elementos de formulario.Enlace de datos bidireccional
    • Vincular evento de clic para enviar botón
    <!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

    Después de que Tomcat ejecuta el proyecto web, la captura de pantalla en ejecución es la siguiente

    Insertar descripción de la imagen aquí

Elemento

  • definición

    • Es un conjunto de bibliotecas de componentes de sitios web basadas en Vue que se pueden utilizar para crear páginas web rápidamente.
    • Componentes: los componentes que componen una página web, como hipervínculos, botones, imágenes, tablas, etc.
    • puede basarse enSitio web oficial del elementoestudiar
  • Aviso:

    • Utilizado en inicio rápidoelement-uiDescargar sitio web oficialNo se puede descargar, puede usar el siguiente código para descargarlo usted mismo (puede cambiar la ruta de descarga y la URL de la versión correspondiente usted mismo)
    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

ElementoInicio rápido

  • Paso 1: Introducir el archivo Vue.js

  • Paso 2: Voluntadelement-uiEl directorio se coloca en el directorio principal del proyecto web (es decir, aplicación web) y luego se importa.element-uiarchivos css, js

    • Introducir archivos locales Element css y js

      <!-- 引入样式 -->
      <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
      <!-- 引入组件库 -->
      <script src="element-ui/lib/index.js"></script>
      
      • 1
      • 2
      • 3
      • 4
    • Introduce los archivos css y js del 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
  • Paso 3: Cree objetos principales de Vue (consulte la sección de Vue para obtener más detalles)

  • Etapa 4: ElementoPágina web oficialCopie el código del componente Element

  • El código básico de estructura de página HTML es el siguiente:

    <!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
  • El ejemplo de código completo es el siguiente

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

    Después de que el navegador abre el archivo html, la página tiene el siguiente aspecto

    Insertar descripción de la imagen aquí

Diseño de elementos

Diseño de diseño

Insertar descripción de la imagen aquí

  • Definición: Cree diseños rápida y fácilmente con un formato básico de 24 columnas.

  • Explicación: Proporcionará muchas filas, cada fila tiene 24 cuadrículas básicas

    • Como se muestra en la figura
      • Solo hay una cuadrícula en la primera fila, pero esta cuadrícula ocupa el ancho de 24 cuadrículas básicas.
      • La segunda fila tiene dos celdas, cada una de las cuales ocupa el ancho de 12 celdas básicas.
      • Lo mismo ocurre con las siguientes líneas.
  • paso:

    • Paso 1: Introduzca el archivo vue.js, el archivo index.css del elemento y el archivo index.js

    • Paso 2: crear el objeto principal de Vue

    • Paso 3: copie el código del componente que desee del sitio web oficial

      • irEncuentre el componente Diseño en el sitio web oficial, tomando el diseño básico como ejemplo, encontramos que el código oficial incluye código html y código css, de la siguiente manera
      • <style>El cuerpo de la etiqueta es un código de estilo CSS, que podemos introducir externamente o escribir directamente en la página 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
  • Ejemplo de código 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

    Abra la página html a través del navegador, la captura de pantalla es la siguiente

    Insertar descripción de la imagen aquí

Contenedor de diseño de contenedor

Insertar descripción de la imagen aquí

  • Definición: Componente contenedor utilizado para el diseño para facilitar la construcción rápida de la estructura básica de la página.

  • Explicación: como se muestra en la imagen de arriba, es un diseño con una barra de navegación izquierda

  • paso:

    • Paso 1: Introduzca el archivo vue.js, el archivo index.css del elemento y el archivo index.js

    • Paso 2: crear el objeto principal de Vue

    • Paso 3: copie el código del componente que desee del sitio web oficial

      • Tome la primera instancia como ejemplo, como se muestra en la imagen del sitio web oficial.

        Insertar descripción de la imagen aquí

      • En este ejemplo, además del código html y css, también hay atributos del objeto Vue, como se muestra a continuación

        <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

        Podemos copiar las propiedades de Vue en la instancia del sitio web oficial a nuestro propio objeto principal de Vue, de la siguiente manera

        <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
  • Ejemplo de código 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

    Abra la página html a través del navegador, la captura de pantalla es la siguiente

    Insertar descripción de la imagen aquí

Caso de elemento

Haz el efecto como se muestra a continuación.

Insertar descripción de la imagen aquí

Componente de tabla de elementos

  • Paso 1: Vaya al sitio web oficial y copie el ejemplo correspondiente del formulario (conSitio web oficial con formulario de estado.Por ejemplo), el código es el siguiente:

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

    Después de que el navegador abra la página html, como se muestra en la figura, comience a realizar ajustes después de obtener una imagen aproximada.

    Insertar descripción de la imagen aquí

  • Paso 2: Agregue columnas y datos a la tabla obtenida en el Paso 1 y modifique los nombres de las columnas

    • borrarwidthCada columna ajustará automáticamente su ancho después del atributo.

    • Centrar el contenido de la tabla: desplácese hacia abajo en la sección del componente de tabla correspondiente del sitio web oficial para encontrar los métodos y propiedades correspondientes, como se muestra en la figura.Establecer propiedadesalign="center"

      Insertar descripción de la imagen aquí

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

    Insertar descripción de la imagen aquí

  • Paso 3: Agregar una columna de acción a la tabla

    • En la columna de operación hay修改y删除Botón, vaya al sitio web oficial para encontrar el código del botón correspondiente, cópielo y péguelo
    <!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

    Insertar descripción de la imagen aquí

  • Etapa 4: Agregue un número de serie a la tabla: busque la tabla con un número de serie en el sitio web oficial y copie el código para agregar el número de 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

    Insertar descripción de la imagen aquí

  • Paso 5: Agregar una casilla de verificación a una tabla: busque la tabla con una casilla de verificación y copie el código de la casilla de verificación

    • Dado que las operaciones por lotes se pueden realizar en la fila de datos después de seleccionar la casilla de verificación en el diagrama de caso, la tabla debe tener un método, por lo que cuando copiamos el código sobre la casilla de verificación, también debemos copiar la tabla con la casilla de verificación Copiar. el método correspondiente en (no olvide escribir este método en el objeto principal de Vue), el método es el siguiente

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

      Este método tiene una propiedadmultipleSelection, entonces necesitamos copiar este atributo en nuestro propio código. El código final completo es el siguiente:

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

    Insertar descripción de la imagen aquí

    • Agregue salida al método de la casilla de verificación y pruebe para ver si tiene éxito. El código es el siguiente.

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

      Después de abrir la página en el navegador, abra las herramientas de desarrollador → seleccione el controlador de consola para ver el resultado, como se muestra en la figura

      Insertar descripción de la imagen aquí

Componente de forma de elemento

  • Paso 6: Agregue un formulario: el formulario en el diagrama de caso es horizontal, por lo que buscamos un formulario similar (es decir, un formulario en línea) en el sitio web oficial y copiamos el código como sigue.

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

    Insertar descripción de la imagen aquí

  • Paso 7: Modifique el formulario para que sea coherente con el diagrama de caso, el código es el siguiente

    • Al modificar el nombre del formulario, asegúrese de modificar el valor del atributo del modelo v y el valor del atributo en el objeto Vue al nombre correspondiente.
    <!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

    Insertar descripción de la imagen aquí

Cuadros de diálogo y formularios de elementos.

Insertar descripción de la imagen aquí

Los cuadros de diálogo y los formularios aparecen al hacer clic en el botón Agregar, por lo que debemos agregarlos antes de crear cuadros de diálogo y formularios.批量删除y新增dos botones

  • Paso 8: añadir批量删除y新增botón, agregar diálogo

    Busque el componente del cuadro de diálogo en el sitio web oficial. Aquí tomamos un uso básico del cuadro de diálogo como ejemplo y copiamos su código.

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

    Insertar descripción de la imagen aquí

  • Paso 9: Agregue un formulario al cuadro de diálogo, el código es el siguiente

    • Busque el componente del formulario en el sitio web oficial y modifíquelo
    <!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

    Insertar descripción de la imagen aquí

  • Paso 10: Los pasos son los siguientes y el código es el siguiente.

    • Dar新增Evento de clic de enlace de botón, siempre que sea un clic新增El botón abre el formulario de diálogo.
    • Cambiar el formulario que viene con él.提交El método correspondiente al evento de clic vinculado al botón: Cambie el método aaddBrand, siempre que se haga clic en el botón, el formulario de diálogo se enviará automáticamente.
    • El cuadro de diálogo viene con确定取消boton borrar
    • Viene con el formulario取消El botón está vinculado a un evento de clic. Mientras se haga clic en el botón, el formulario de diálogo desaparece.
    • El modelo ligado al formulario esform(Ahora mismomodel="form"), cambie su valor de atributo abrandy completar los datos en el objeto de marca
    • Establezca el interruptor de estado en 0 o 1: busque el componente de interruptor correspondiente en el sitio web oficial y luego establezca el valor del atributo en 0 o 1 de acuerdo con los atributos correspondientes.
    <!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

    Insertar descripción de la imagen aquí

Barra de herramientas de paginación de elementos

  • Paso 11: Vaya al sitio web oficial para encontrar el componente de paginación, copie el código correspondiente y realice las modificaciones correspondientes. El código es el siguiente:

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

    Insertar descripción de la imagen aquí