技術共有

ビッグデータ-----JavaWeb-----Vue

2024-07-12

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

ビュー

  • 意味

    • Vue は、ネイティブ JavaScript での DOM 操作を排除し、記述を簡素化できるフロントエンド フレームワークです。

      • 以前に学んだ MyBatis フレームワークは JDBC コードの記述を簡素化するために使用され、Vue は JavaScript コードの記述を簡略化するために使用されるフロントエンド フレームワークです。

      • Axios と JSON に包括的なケースを追加するには多数の DOM 操作があります。例は次のとおりです。

        let brandName = document.getElementById("brandName").value;
        let companyName = document.getElementById("companyName").value;
        let ordered = document.getElementById("ordered").value;
        let description = document.getElementById("description").value;
        // 获取单选框数组
        let status = document.getElementsByName("status");
        //2.3 给JS对象设置数据
        formData.brandName = brandName;
        formData.companyName = companyName;
        formData.ordered = ordered;
        formData.description = description;
        
        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
    • MVVM(Model-View-ViewModel)の考え方に基づいており、データを実現できます双方向バインディング 、データに重点​​を置いたプログラミング

      • 注: 以前に学習した MVC パターンは、モデルからビューへの一方向の表示のみを実現でき、ビューとモデルを相互にバインドすることはできません (つまり、モデルとビューの一方が変更される限り、もう一方も変更されます)変化)

      ここに画像の説明を挿入します

    • 自分でもできる公式ウェブサイト勉強

Vue のクイック スタート

  • 新しい HTML ページを作成してインポートするVue.js書類

    • ローカル Vue ファイルを導入する場合 (ブロガーは VUE2 の最後のバージョンを使用します)。Vue2.7.16开发环境、公式 Web サイトにアクセスして、対応するファイルをダウンロードできます。js書類)

      <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
      
      • 1
    • リモートnpmパッケージで提供されるVueサービスを導入する場合

      • 開発環境

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        
        • 1
      • 本番環境

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        
        • 1
  • JSコード領域(<Script>タグ本体)、データ バインディング用の Vue コア オブジェクトを作成します

    • Vue オブジェクトを作成するときは、js オブジェクトを渡す必要があり、オブジェクトには次のプロパティが必要です。

      属性説明する
      el Vue によって管理されるタグを指定します。 この属性の値#app 真ん中app Vue で管理されるタグの場合id属性値
      dataデータ型を定義するために使用されます
      methods定義に使用される関数、return を通じて関数値を返すことができます
      new Vue({
          el:"#app",
          data() {
              return {
                  username : ""
              }
          }
      });
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
  • ビューの書き方(HTMLコード)

    • 次の例ではdivラベル付きidアプリの場合、対応する Vue オブジェクトが作成されます。el属性値
    • <input>ラベルは入力ボックスを作成しますv-model入力ボックスを Vue モデルに双方向にバインドするためのプロパティ
      • v-model属性値は作成された Vue オブジェクトに対応します。return括弧内のモデル名は一貫しています
    • {{}}Vueで定義されています 補間式 、モデル内のデータを取得するために使用されます
    <div id="app">
        <input name="username" v-model="username">
        {{username}}
    </div>
    
    • 1
    • 2
    • 3
    • 4
  • vueDemo1.html ファイルの完全なコードは次のとおりです。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="app">
                <input name="username" v-model="username">
                {{username}}
            </div>
    
            <!--引入vue.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <script>
                // 创建Vue核心对象
                new Vue({
                    el:"#app",
                    //data() 是 ECMAScript 6 版本的新的写法
                    data() {
                        return {
                            username : ""
                        }
                    }
                    /*等同于
                    data: function () {
                        return {
                            username : ""
                        }
                    }这个是老版本
                    */
                });
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    ブラウザが HTML ページを開いた後の実行中のスクリーンショットは次のとおりです。

    ここに画像の説明を挿入します

Vueディレクティブ

命令効果
v-bind設定などの属性値をHTMLタグにバインドする href , cssスタイルなど
v-modelフォーム要素に双方向のデータ バインディングを作成する
v-onイベントをHTMLタグにバインドする
v-if要素を条件付きでレンダリングします。次のように決定されます。true必要な場合はレンダリングし、それ以外の場合はレンダリングしない
v-else要素を条件付きでレンダリングします。次のように決定されます。true必要な場合はレンダリングし、それ以外の場合はレンダリングしない
v-else-if要素を条件付きでレンダリングします。次のように決定されます。true必要な場合はレンダリングし、それ以外の場合はレンダリングしない
v-show条件に基づいて要素を表示します。違いは、スイッチがあることです。display属性値
v-forリストのレンダリング、コンテナーの要素またはオブジェクトのプロパティの走査
  • 意味:Htmlとラベルが貼られていますv-プレフィックスの特別なプロパティ、異なる命令は異なる意味を持ちます。

v-bindv-model

  • v-bind:設定などの属性値をHTMLタグにバインドします href , cssスタイルなど

    • 例は次のとおりです。

      <a v-bind:href="url">百度一下</a>
      
      • 1
    • と略すことができます

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

      今後、URL が変更される限り、対応するv-bind属性値もすぐに変更されます。

  • v-model:フォーム要素に双方向のデータ バインディングを作成する

    • 例は次のとおりです

      <input name="username" v-model="username"> 
      
      • 1
  • 完全な例は次のとおりです

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="app">
                <input name="urlname" v-model="url">
                {{url}}
                <br>
                <a :href="url">点击一下跳转</a>
            </div>
    
            <!--引入vue.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <script>
                // 创建Vue核心对象
                new Vue({
                    el:"#app",
                    //data() 是 ECMAScript 6 版本的新的写法
                    data() {
                        return {
                            url : ""
                        }
                    }
                    /*等同于
                    data: function () {
                        return {
                            url : ""
                        }
                    }这个是老版本
                    */
                });
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    ここに画像の説明を挿入します

v-on

  • v-on: イベントを HTML タグにバインドします

  • 例: イベントがボタンのクリックにバインドされ、イベントが実行されます。show()に書かれているメソッドmethods生体内

    • 完全形式か短縮形式かに関係なく、バインドされたイベントがメソッドの場合、メソッドは括弧を省略できます。
    • 完全な形式は次のとおりです
    <input type="button" value="按钮" v-on:click="show()">
    <!--等同于如下形式-->
    <input type="button" value="按钮" v-on:click="show">
    
    • 1
    • 2
    • 3
    • 省略形は次のとおりです
    <input type="button" value="按钮" @click="show()">
    <!--等同于如下形式-->
    <input type="button" value="按钮" @click="show">
    
    • 1
    • 2
    • 3
  • 完全なコード例は次のとおりです。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="app">
                <input type="button" value="按钮" v-on:click="show()">
                <!--简略形式-->
                <input type="button" value="按钮" @click="sunShow">
            </div>
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <script>
                new Vue({
                    el:"#app",
                    methods:{
                        show() {
                            alert("第一个按钮被点击");
                        },
                        sunShow() {
                            alert("第二个按钮被点击")
                        }
                    }
                });
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    ブラウザーで HTML ページを開いた後の実行中のスクリーンショットは次のとおりです。

    ここに画像の説明を挿入します

v-ifv-show

  • v-ifv-elsev-else-if: 要素を条件付きでレンダリングし、true であると判断された場合にレンダリングし、それ以外の場合はレンダリングしません。

    • 一緒に使用すると、次と同等になります。if-else if-else
    <div v-if="count == 3">count==3</div>
    <div v-else-if="count == 2">count==2</div>
    <div v-else>count !=2 && count != 3</div>
    
    • 1
    • 2
    • 3
    • 完全なコード例は次のとおりです

      <!DOCTYPE html>
      <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
          </head>
          <body>
              <div id="app">
                  请输入count的值:<br>
                  <input type="text" v-model="count">
                  <br>
                  count值为:
                  <br>
                  <div v-if="count == 3">count==3</div>
                  <div v-else-if="count == 2">count==2</div>
                  <div v-else>还未输入,请输入count值</div>
      
              </div>
              <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
              <script>
                  new Vue({
                      el:"#app",
                      data() {
                          return {
                              count:""
                          }
                      }
                  });
              </script>
          </body>
      </html>
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31

      ブラウザが HTML ページを開いた後のスクリーンショットは次のとおりです。

      ここに画像の説明を挿入します

  • v-show:条件に基づいて要素を表示します

    • v-show そしてv-if 効果は同じですが、実装原理が異なります。v-show 非表示の原則は対応するタグを追加することですdisplay css 属性を指定し、属性値を次のように設定します。none、そしてv-if直接的にはそうではないdivタグは、条件が満たされた場合にのみソース コードに表示されます。divラベル。詳細については、完全なコード例のスクリーンショットを参照してください。
    <div v-show="count == 3">div4</div>
    
    • 1
  • 完全なコード例は次のとおりです

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="app">
                请输入count的值:<br>
                <input type="text" v-model="count">
                <br>
                count值为:
                <br>
                <div v-if="count == 3">count==3</div>
                <div v-else-if="count == 2">count==2</div>
                <div v-else>还未输入,请输入count值</div>
                <hr>
                <div v-show="count == 3">v-show:当count==3时展示</div>
            </div>
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <script>
                new Vue({
                    el:"#app",
                    data() {
                        return {
                            count:""
                        }
                    }
                });
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

    ブラウザーで HTML ファイルが開き、実行中のスクリーンショットは次のとおりです。

    ここに画像の説明を挿入します

    ここに画像の説明を挿入します

    ここに画像の説明を挿入します

v-for

  • v-for: リストのレンダリング、コンテナーの要素またはオブジェクトのプロパティのトラバース

  • 通常の方法で配列を走査する

    <div v-for="addr in addrs">
        {{addr}}<br>
    </div>
    
    • 1
    • 2
    • 3
  • 配列をインデックスで走査する

    <div v-for="(addr,i) in addrs">
        {{i+1}}:{{addr}}<br>
    </div>
    
    • 1
    • 2
    • 3
  • コード例

    • 通常の方法で配列を走査する

      <!DOCTYPE html>
      <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
          </head>
          <body>
              <div id="app">
                  <!--遍历数组-->
                  <div v-for="addr in addrs">
                      {{addr}}<br>
                  </div>
              </div>
              <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
              <script>
                  new Vue({
                      el:"#app",
                      data() {
                          return {
                              addrs:["北京", "上海", "天津"]
                          }
                      }
                  });
              </script>
          </body>
      </html>
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26

      ここに画像の説明を挿入します

    • 配列をインデックスで走査する

      <!DOCTYPE html>
      <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
          </head>
          <body>
              <div id="app">
                  <!--索引方式遍历数组-->
                  <div v-for="(addr,i) in addrs">
                      {{i+1}}:{{addr}}<br>
                  </div>
              </div>
              <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
              <script>
                  new Vue({
                      el:"#app",
                      data() {
                          return {
                              addrs:["北京", "上海", "天津"]
                          }
                      }
                  });
              </script>
          </body>
      </html>
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26

      ここに画像の説明を挿入します

Vueのライフサイクル

ステージサイクル
beforeCreate作成前
created作成後
beforeMountロードする前に
mounted取り付け完了
beforeUpdateアップデート前
updated更新しました
beforeDestroy破壊の前に
destroyed破壊後
  • Vue のライフサイクルには 8 つの段階があります

    • ライフサイクル イベントがトリガーされるたびに、ライフサイクルメソッド (フックメソッドとも呼ばれます)
  • 各ライフサイクルの位置づけは以下の通り

    ここに画像の説明を挿入します

  • mounted: マウント完了、Vue 初期化成功、HTML ページレンダリング成功

    • このメソッドで非同期リクエストを送信してデータをロードできます。

    • 簡単な例

      new Vue({
          el:"#app",
          mounted() {
            alert("Vue挂载完毕,发送异步请求")  
          }
      });
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
  • 完全なコード例

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="app">
                <!--普通方式遍历数组-->
                <div v-for="addr in addrs">
                    {{addr}}<br>
                </div>
                <!--索引方式遍历数组-->
                <div v-for="(addr,i) in addrs">
                    {{i+1}}:{{addr}}<br>
                </div>
            </div>
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <script>
                new Vue({
                    el:"#app",
                    data() {
                        return {
                            addrs:["北京", "上海", "天津"]
                        }
                    },
                    //简略版本
                    mounted() {
                        alert("Vue挂载完毕,发送异步请求")
                    }
                    /*老版本
                    mounted:function () {
    
                    }*/
                });
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

Vueのケース

すべて検索

ここに画像の説明を挿入します

  • brand.html変更点は以下の通りです

    ここに画像の説明を挿入します

  • brand.htmlコードの変更は次のとおりです。

    • vue.jsファイルを導入する
    • データ バインディング用の Vue コア オブジェクトを作成する
    • 使用mountedこのメソッドは非同期リクエストを送信し、ページがロードされた後にデータをクエリします。
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="app">
                <table border="1" cellspacing="0">
                    <tr>
                        <th>序号</th>
                        <th>品牌名称</th>
                        <th>企业名称</th>
                        <th>排序</th>
                        <th>品牌介绍</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    <!--使用v-for循环遍历-->
                    <tr v-for="(brand,i) in brands" align="center">
                        <td>{{i + 1}}</td>
                        <td>{{brand.brandName}}</td>
                        <td>{{brand.companyName}}</td>
                        <td>{{brand.ordered}}</td>
                        <td>{{brand.description}}</td>
                        <td>{{brand.status == 1 ? "启用" : "禁用"}}</td>
                        <td><a href="#">修改</a><a href="#">删除</a></td>
                    </tr>
                </table>
            </div>
            <script src="js/axios-0.18.0.js"></script>
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <script>
                new Vue({
                    el: "#app",
                    data() {
                        return {
                            brands:[]
                        }
                    },
                    // 页面加载完成后利用mounted方法发送异步请求并查询数据
                    mounted() {
                        // 发送异步请求并查询数据
                        // 在Vue的实例方法中,this指向Vue实例本身
                        var _this = this;
                        axios({
                            method:"get",
                            url:"http://localhost:8080/VueDemo/selectAllServlet"
                        }).then(function (resp) {
                            // 获取响应数据,并将数据赋给brands
                            // 错误写法:this.brands = resp.data;
                            /* 在Axios的then方法的回调函数中,this可能指向其他对象,通常是全局对象(在浏览器中是 window 对象)
                                所以需要提前将代指Vue示例本身的this赋给_this
                             */
                            //axios会自动将获取的JSON字符串数据转为js对象数组
                            _this.brands = resp.data;
                        })
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62

    Tomcat が Web プロジェクトを実行した後のスクリーンショットは次のとおりです。

    ここに画像の説明を挿入します

  • 質問

    • なぜだろうvar _this = this、なぜ直接ではないのですかthis.brands=resp.data

      JavaScriptで this キーワードの動作は、キーワードが呼び出されるコンテキストによって異なります。 Vueのインスタンスメソッドでは、this Vue インスタンス自体を指します。しかしアクシオスではthen メソッドのコールバック関数では、this 他のオブジェクト、通常はグローバル オブジェクト (ブラウザではこれはwindow 物体)。これにより、Vue インスタンスのプロパティとメソッドに正しくアクセスできなくなります。

      定義により var _this = this、Vue インスタンスの this に保存します_this 変数を取得してコールバック関数で使用します_this Vue インスタンスを正しく参照するには、

に追加

ここに画像の説明を挿入します

  • addbrand.html変更点は以下の通りです

    ここに画像の説明を挿入します

  • brand.htmlコードの変更は次のとおりです。

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

    • 導入vue.js書類
    • データ バインディング用の Vue コア オブジェクトを作成する
    • 使用v-model属性はフォーム要素に作成されます双方向のデータバインディング
    • クリックイベントを送信ボタンにバインドする
    <!DOCTYPE html>
    <html lang="en">
    
        <head>
            <meta charset="UTF-8">
            <title>添加品牌</title>
        </head>
        <body>
            <h3>添加品牌</h3>
            <div id="app">
                <!--表单直接提交属于同步请求方式提交表单,为了使用异步方式以及AJAX+JSON异步方式提交所以要将action属性值设为空并将提交按钮的type属性值设为button-->
                <!--action的属性值为浏览器提交到服务器的资源路径-->
                <!--将action属性值由具体的url改为空-->
                <form action="" method="post">
                    品牌名称:<input id="brandName" name="brandName" v-model="brand.brandName"><br>
                    企业名称:<input id="companyName" name="companyName" v-model="brand.companyName"><br>
                    排序:<input id="ordered" name="ordered" v-model="brand.ordered"><br>
                    描述信息:<textarea rows="5" cols="20" id="description" name="description" v-model="brand.description"></textarea><br>
                    状态:
                    <input type="radio" name="status" value="0" v-model="brand.status">禁用
                    <input type="radio" name="status" value="1" v-model="brand.status">启用<br>
                    <!--将提交按钮的type属性由submit改为button-->
                    <input type="button" v-on:click="submitForm()" value="提交">
                </form>
            </div>
    
            <script src="js/axios-0.18.0.js"></script>
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
    
            <script>
                new Vue({
                    el: "#app",
                    data() {
                        return {
                            /*
                            由于数据最终要封装为对象,所以直接创建一个对象即可
                            注意:不需要给该对象属性,是因为 Vue.js 的双向数据绑定机制和响应式系统会自动处理,
                            即v-model 自动创建对象属性并追踪它们,只要用户填写输入框,就会自动将其作为brand对象的属性封装起来
                             */
                            brand:{}
                        }
                    },
                    methods:{
                        submitForm() {
                            var _this = this;
                            // 发送axios请求并添加数据
                            axios({
                                method:"post",
                                url:"http://localhost:8080/VueDemo/addServlet",
                                //3 JSON数据格式发送请求
                                // formData为JS对象,Axios会自动将JS对象转为JSON字符串然后在传给服务端
                                data:_this.brand
                            }).then(function (resp) {
                                //4 获取响应数据并判断响应数据是否为success
                                if(resp.data == "success"){
                                    location.href = "http://localhost:8080/VueDemo/brand.html";
                                }
                            })
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64

    Tomcat が Web プロジェクトを実行した後の実行中のスクリーンショットは次のとおりです。

    ここに画像の説明を挿入します

要素

  • 意味

    • これは、Web ページを迅速に構築するために使用できる、Vue に基づく Web サイト コンポーネント ライブラリのセットです。
    • コンポーネント: ハイパーリンク、ボタン、画像、表など、Web ページを構成するコンポーネント。
    • に基づくことができますエレメント公式サイト勉強
  • 知らせ:

    • クイックスタートで使用element-ui公式サイトをダウンロードダウンロードできません。次のコードを使用して自分でダウンロードできます(ダウンロード パスと対応するバージョンの URL は自分で変更できます)
    import java.io.File;
    import java.io.FileOutputStream;
    import java.io.InputStream;
    import java.net.HttpURLConnection;
    import java.net.URL;
    import java.nio.charset.StandardCharsets;
    import java.util.ArrayList;
    
    /**
     * 下载element-ui
     */
    public class Main {
        //本地保存目录
        static String fileP = "F:/insert/java/element-ui/";
        //url
        static String urlP = "https://unpkg.com/browse/[email protected]/";
        static String urlF = "https://unpkg.com/[email protected]/";
        public static void main(String[] args){
            try {
                GetPage("");
            } catch (Exception e) {
                e.printStackTrace();
            }
            System.out.println("done ......");
        }
        static void GetPage(String after) throws Exception {
            System.out.println(urlP + after);
            new File(fileP + after).mkdir();
            HttpURLConnection http = (HttpURLConnection) (new URL(urlP + after)).openConnection();
            http.setRequestMethod("GET");
            http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");
            http.connect();
            if(http.getResponseCode() == 200) {
                InputStream inputStream = http.getInputStream();
                byte [] buffer = new byte[10240];
                ArrayList<byte []> byteList = new ArrayList<>();
                ArrayList<Integer> byteLength = new ArrayList<>();
                int length;
                int totalLength = 0;
                while( (length = inputStream.read(buffer)) != -1 ) {
                    byteList.add(buffer);
                    byteLength.add(length);
                    totalLength += length;
                    buffer = new byte[10240];
                }
                http.disconnect();
                byte [] all;
                all = new byte[totalLength];
                totalLength = 0;
                while(byteList.size() != 0) {
                    System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));
                    totalLength += byteLength.get(0);
                    byteList.remove(0);
                    byteLength.remove(0);
                }
                String content = new String(all, StandardCharsets.UTF_8);
                all = null;
                content = content.split("tbody")[1];
                String [] us = content.split("href="");
                for(int i = 1; i < us.length; i ++) {
                    String href = us[i].split(""", 2)[0];
                    if(href.equals("../")) {
                        continue;
                    }
                    if(href.charAt(href.length() - 1) == '/') {
                        GetPage(after + href);
                    } else {
                        //下载文件,失败重试,大部分是网络原因
                        try {
                            GetFile(after + href);
                        }catch (Exception e){
                            System.out.println(after + href + " 下载失败,重试");
                            GetFile(after + href);
                        }
                    }
                }
            } else {
                GetPage(after);
            }
        }
        static void GetFile(String url) throws Exception{
            System.out.println(url);
            HttpURLConnection http;
            http = (HttpURLConnection) (new URL(urlF + url)).openConnection();
            http.setRequestMethod("GET");
            http.setRequestProperty("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3562.0 Safari/537.36");
            http.connect();
            if(http.getResponseCode() == 200) {
                InputStream inputStream = http.getInputStream();
                byte [] buffer = new byte[10240];
                ArrayList<byte []> byteList = new ArrayList<>();
                ArrayList<Integer> byteLength = new ArrayList<>();
                int length;
                int totalLength = 0;
                while( (length = inputStream.read(buffer)) != -1 ) {
                    byteList.add(buffer);
                    byteLength.add(length);
                    totalLength += length;
                    buffer = new byte[10240];
                }
                http.disconnect();
                byte [] all;
                all = new byte[totalLength];
                totalLength = 0;
                while(byteList.size() != 0) {
                    System.arraycopy(byteList.get(0), 0, all, totalLength, byteLength.get(0));
                    totalLength += byteLength.get(0);
                    byteList.remove(0);
                    byteLength.remove(0);
                }
                File f = new File(fileP + url.replaceAll("/", "\\"));
                //文件存在,不重复下载
                if(f.exists()){
                    System.out.println(f.getAbsoluteFile() + " 存在");
                    return;
                }
                f.createNewFile();
                FileOutputStream fos = new FileOutputStream(f, false);
                fos.write(all);
                fos.flush();
                fos.close();
            } else {
                GetFile(url);
            }
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126

要素クイックスタート

  • ステップ1: Vue.jsファイルを導入する

  • ステップ2: 意思element-uiディレクトリは Web プロジェクト (つまり、webapp) のコア ディレクトリの下に配置され、インポートされます。element-uicss、jsファイル

    • ローカル要素の css および js ファイルを導入する

      <!-- 引入样式 -->
      <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
      <!-- 引入组件库 -->
      <script src="element-ui/lib/index.js"></script>
      
      • 1
      • 2
      • 3
      • 4
    • リモート要素の css および js ファイルを導入します。

      <!-- 引入样式 -->
      <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
      <!-- 引入组件库 -->
      <script src="https://unpkg.com/element-ui/lib/index.js"></script>
      
      • 1
      • 2
      • 3
      • 4
  • ステップ3: Vue コア オブジェクトを作成します (詳細については、「Vue」セクションを参照)

  • ステップ4: 要素公式ウェブサイトElement コンポーネントのコードをコピーする

  • 基本的な HTML ページ構造のコードは次のとおりです。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="app">
                <!--3 从官网复制自己想要的组件代码并做对应设计更改-->
                
            </div>
    
            <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <!-- 引入样式 -->
            <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
            <!-- 引入组件库 -->
            <script src="element-ui/lib/index.js"></script>
    
            <!--2 创建Vue核心对象-->
            <script>
                new Vue({
                    el : "#app"
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
  • 完全なコード例は次のとおりです

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="app">
                <!--3 从官网复制自己想要的组件代码 : 以button按钮为例-->
                <el-row>
                    <el-button round>圆角按钮</el-button>
                    <el-button type="primary" round>主要按钮</el-button>
                    <el-button type="success" round>成功按钮</el-button>
                    <el-button type="info" round>信息按钮</el-button>
                    <el-button type="warning" round>警告按钮</el-button>
                    <el-button type="danger" round>危险按钮</el-button>
                </el-row>
            </div>
    
            <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <!-- 引入样式 -->
            <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
            <!-- 引入组件库 -->
            <script src="element-ui/lib/index.js"></script>
    
            <!--2 创建Vue核心对象-->
            <script>
                new Vue({
                    el : "#app"
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    ブラウザで HTML ファイルを開くと、ページは次のように表示されます。

    ここに画像の説明を挿入します

要素のレイアウト

レイアウト レイアウト

ここに画像の説明を挿入します

  • 定義: 基本的な 24 列のレイアウトを迅速かつ簡単に作成します。

  • 説明: 多くの行が提供され、各行には 24 個の基本グリッドがあります。

    • 図1に示すように、
      • 最初の行にはグリッドが 1 つだけありますが、このグリッドは 24 個の基本グリッドの幅を占めます。
      • 2 番目の行には 2 つのセルがあり、それぞれが 12 個の基本セルの幅を占めます。
      • 次の数行も同様です
  • ステップ:

    • ステップ1: vue.jsファイル、要素のindex.cssファイル、index.jsファイルを導入する

    • ステップ 2: Vue コア オブジェクトを作成する

    • ステップ3: 公式Webサイトから必要なコンポーネントコードをコピーします

      • 行く公式 Web サイトで Layout コンポーネントを見つけます。基本的なレイアウトを例にとると、公式コードには次のように html コードと css コードが含まれていることがわかりました。
      • <style>タグの本体は CSS スタイルのコードであり、外部から導入することも、HTML ページに直接書き込むこともできます。
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      
      <style>
        .el-row {
          margin-bottom: 20px;
          &:last-child {
            margin-bottom: 0;
          }
        }
        .el-col {
          border-radius: 4px;
        }
        .bg-purple-dark {
          background: #99a9bf;
        }
        .bg-purple {
          background: #d3dce6;
        }
        .bg-purple-light {
          background: #e5e9f2;
        }
        .grid-content {
          border-radius: 4px;
          min-height: 36px;
        }
        .row-bg {
          padding: 10px 0;
          background-color: #f9fafc;
        }
      </style>
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
  • 完全なコード例

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <!--head标签体内放入css样式代码-->
            <style>
                .el-row {
                    margin-bottom: 20px;
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
                .el-col {
                    border-radius: 4px;
                }
                .bg-purple-dark {
                    background: #99a9bf;
                }
                .bg-purple {
                    background: #d3dce6;
                }
                .bg-purple-light {
                    background: #e5e9f2;
                }
                .grid-content {
                    border-radius: 4px;
                    min-height: 36px;
                }
                .row-bg {
                    padding: 10px 0;
                    background-color: #f9fafc;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <el-row>
                    <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
                </el-row>
                <el-row>
                    <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
                </el-row>
                <el-row>
                    <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                </el-row>
                <el-row>
                    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
                </el-row>
                <el-row>
                    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
                </el-row>
            </div>
    
            <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <!-- 引入样式 -->
            <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
            <!-- 引入组件库 -->
            <script src="element-ui/lib/index.js"></script>
    
            <!--2 创建Vue核心对象-->
            <script>
                new Vue({
                    el : "#app"
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80

    ブラウザで HTML ページを開くと、スクリーンショットは次のようになります。

    ここに画像の説明を挿入します

コンテナレイアウトコンテナ

ここに画像の説明を挿入します

  • 定義: ページの基本構造を迅速に構築するためのレイアウトに使用されるコンテナ コンポーネント

  • 説明: 上の図に示すように、左側にナビゲーション バーがあるレイアウトです。

  • ステップ:

    • ステップ1: vue.jsファイル、要素のindex.cssファイル、index.jsファイルを導入する

    • ステップ 2: Vue コア オブジェクトを作成する

    • ステップ3: 公式Webサイトから必要なコンポーネントコードをコピーします

      • 公式ウェブサイトの写真に示されているように、最初のインスタンスを例に挙げます。

        ここに画像の説明を挿入します

      • この例では、HTML と CSS コードに加えて、次のような Vue オブジェクトの属性もあります。

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

        次のように、公式 Web サイトのインスタンスにある Vue のプロパティを独自の Vue コア オブジェクトにコピーできます。

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

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <!--head标签体内放入css样式代码-->
            <style>
                .el-header {
                    background-color: #B3C0D1;
                    color: #333;
                    line-height: 60px;
                }
    
                .el-aside {
                    color: #333;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <el-container style="height: 500px; border: 1px solid #eee">
                    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                        <el-menu :default-openeds="['1', '3']">
                            <el-submenu index="1">
                                <template slot="title"><i class="el-icon-message"></i>导航一</template>
                                <el-menu-item-group>
                                    <template slot="title">分组一</template>
                                    <el-menu-item index="1-1">选项1</el-menu-item>
                                    <el-menu-item index="1-2">选项2</el-menu-item>
                                </el-menu-item-group>
                                <el-menu-item-group title="分组2">
                                    <el-menu-item index="1-3">选项3</el-menu-item>
                                </el-menu-item-group>
                                <el-submenu index="1-4">
                                    <template slot="title">选项4</template>
                                    <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                                </el-submenu>
                            </el-submenu>
                            <el-submenu index="2">
                                <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                                <el-menu-item-group>
                                    <template slot="title">分组一</template>
                                    <el-menu-item index="2-1">选项1</el-menu-item>
                                    <el-menu-item index="2-2">选项2</el-menu-item>
                                </el-menu-item-group>
                                <el-menu-item-group title="分组2">
                                    <el-menu-item index="2-3">选项3</el-menu-item>
                                </el-menu-item-group>
                                <el-submenu index="2-4">
                                    <template slot="title">选项4</template>
                                    <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                                </el-submenu>
                            </el-submenu>
                            <el-submenu index="3">
                                <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                                <el-menu-item-group>
                                    <template slot="title">分组一</template>
                                    <el-menu-item index="3-1">选项1</el-menu-item>
                                    <el-menu-item index="3-2">选项2</el-menu-item>
                                </el-menu-item-group>
                                <el-menu-item-group title="分组2">
                                    <el-menu-item index="3-3">选项3</el-menu-item>
                                </el-menu-item-group>
                                <el-submenu index="3-4">
                                    <template slot="title">选项4</template>
                                    <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                                </el-submenu>
                            </el-submenu>
                        </el-menu>
                    </el-aside>
    
                    <el-container>
                        <el-header style="text-align: right; font-size: 12px">
                            <el-dropdown>
                                <i class="el-icon-setting" style="margin-right: 15px"></i>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>查看</el-dropdown-item>
                                    <el-dropdown-item>新增</el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <span>王小虎</span>
                        </el-header>
    
                        <el-main>
                            <el-table :data="tableData">
                                <el-table-column prop="date" label="日期" width="140">
                                </el-table-column>
                                <el-table-column prop="name" label="姓名" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="地址">
                                </el-table-column>
                            </el-table>
                        </el-main>
                    </el-container>
                </el-container>
            </div>
    
            <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <!-- 引入样式 -->
            <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
            <!-- 引入组件库 -->
            <script src="element-ui/lib/index.js"></script>
    
            <!--2 创建Vue核心对象-->
            <script>
                new Vue({
                    el : "#app",
                    data() {
                        const item = {
                            date: '2016-05-02',
                            name: '王小虎',
                            address: '上海市普陀区金沙江路 1518 弄'
                        };
                        return {
                            tableData: Array(20).fill(item)
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123

    ブラウザで HTML ページを開くと、スクリーンショットは次のようになります。

    ここに画像の説明を挿入します

要素の場合

以下のようにエフェクトを作ります

ここに画像の説明を挿入します

要素テーブルコンポーネント

  • ステップ1: 公式 Web サイトにアクセスし、対応するフォームの例をコピーします (ステータスフォームのある公式ウェブサイトたとえば)、コードは次のとおりです。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <!--表格css样式-->
            <style>
                .el-table .warning-row {
                    background: oldlace;
                }
    
                .el-table .success-row {
                    background: #f0f9eb;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <!--3 从官网复制自己想要的组件代码-->
                <!--表格代码-->
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName">
                        <el-table-column
                                prop="date"
                                label="日期"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label="地址">
                        </el-table-column>
                    </el-table>
                </template>
            </div>
    
            <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <!-- 引入样式 -->
            <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
            <!-- 引入组件库 -->
            <script src="element-ui/lib/index.js"></script>
    
            <!--2 创建Vue核心对象-->
            <script>
                new Vue({
                    el : "#app",
                    //表格属性
                    methods: {
                        tableRowClassName({row, rowIndex}) {
                            if (rowIndex === 1) {
                                return 'warning-row';
                            } else if (rowIndex === 3) {
                                return 'success-row';
                            }
                            return '';
                        }
                    },
                    data() {
                        return {
                            tableData: [{
                                date: '2016-05-02',
                                name: '王小虎',
                                address: '上海市普陀区金沙江路 1518 弄',
                            }, {
                                date: '2016-05-04',
                                name: '王小虎',
                                address: '上海市普陀区金沙江路 1518 弄'
                            }, {
                                date: '2016-05-01',
                                name: '王小虎',
                                address: '上海市普陀区金沙江路 1518 弄',
                            }, {
                                date: '2016-05-03',
                                name: '王小虎',
                                address: '上海市普陀区金沙江路 1518 弄'
                            }]
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90

    ブラウザで図のようにhtmlページが開き、大まかなイメージを掴んでから調整を開始します。

    ここに画像の説明を挿入します

  • ステップ2: 手順1で取得したテーブルに列とデータを追加し、列名を変更します。

    • 消去width各列は、属性の後で幅を自動的に調整します。

    • テーブルのコンテンツを中央に配置します。図に示すように、公式 Web サイトの対応するテーブル コンポーネント セクションを下にスクロールして、対応するメソッドとプロパティを見つけます。プロパティを設定するalign="center"

      ここに画像の説明を挿入します

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <!--表格css样式-->
            <style>
                .el-table .warning-row {
                    background: oldlace;
                }
    
                .el-table .success-row {
                    background: #f0f9eb;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <!--3 从官网复制自己想要的组件代码-->
                <!--表格代码-->
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName">
                        <el-table-column
                                prop="brandName"
                                label="品牌名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="companyName"
                                label="企业名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="ordered"
                                label="排序"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="当前状态"
                                align="center">
                        </el-table-column>
                    </el-table>
                </template>
            </div>
    
            <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <!-- 引入样式 -->
            <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
            <!-- 引入组件库 -->
            <script src="element-ui/lib/index.js"></script>
    
            <!--2 创建Vue核心对象-->
            <script>
                new Vue({
                    el : "#app",
                    //表格属性
                    methods: {
                        tableRowClassName({row, rowIndex}) {
                            if (rowIndex === 1) {
                                return 'warning-row';
                            } else if (rowIndex === 3) {
                                return 'success-row';
                            }
                            return '';
                        }
                    },
                    data() {
                        return {
                            tableData: [{
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }]
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110

    ここに画像の説明を挿入します

  • ステップ3: テーブルにアクション列を追加する

    • 操作欄には、修改そして删除ボタン、公式 Web サイトにアクセスして対応するボタン コードを見つけ、コピーして貼り付けます。
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <!--表格css样式-->
            <style>
                .el-table .warning-row {
                    background: oldlace;
                }
    
                .el-table .success-row {
                    background: #f0f9eb;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <!--3 从官网复制自己想要的组件代码-->
                <!--表格代码-->
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName">
                        <el-table-column
                                prop="brandName"
                                label="品牌名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="companyName"
                                label="企业名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="ordered"
                                label="排序"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="当前状态"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <el-row>
                                <el-button type="primary">修改</el-button>
                                <el-button type="danger">删除</el-button>
                            </el-row>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
    
            <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <!-- 引入样式 -->
            <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
            <!-- 引入组件库 -->
            <script src="element-ui/lib/index.js"></script>
    
            <!--2 创建Vue核心对象-->
            <script>
                new Vue({
                    el : "#app",
                    //表格属性
                    methods: {
                        tableRowClassName({row, rowIndex}) {
                            if (rowIndex === 1) {
                                return 'warning-row';
                            } else if (rowIndex === 3) {
                                return 'success-row';
                            }
                            return '';
                        }
                    },
                    data() {
                        return {
                            tableData: [{
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }]
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118

    ここに画像の説明を挿入します

  • ステップ4: テーブルにシリアル番号を追加する: 公式 Web サイトでシリアル番号が記載されたテーブルを見つけ、シリアル番号を追加するためのコードをコピーします。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <!--表格css样式-->
            <style>
                .el-table .warning-row {
                    background: oldlace;
                }
    
                .el-table .success-row {
                    background: #f0f9eb;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <!--3 从官网复制自己想要的组件代码-->
                <!--表格代码-->
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName">
                        <!--给表格添加序号-->
                        <el-table-column
                                type="index">
                        </el-table-column>
    
                        <el-table-column
                                prop="brandName"
                                label="品牌名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="companyName"
                                label="企业名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="ordered"
                                label="排序"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="当前状态"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <el-row>
                                <el-button type="primary">修改</el-button>
                                <el-button type="danger">删除</el-button>
                            </el-row>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
    
            <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <!-- 引入样式 -->
            <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
            <!-- 引入组件库 -->
            <script src="element-ui/lib/index.js"></script>
    
            <!--2 创建Vue核心对象-->
            <script>
                new Vue({
                    el : "#app",
                    //表格属性
                    methods: {
                        tableRowClassName({row, rowIndex}) {
                            if (rowIndex === 1) {
                                return 'warning-row';
                            } else if (rowIndex === 3) {
                                return 'success-row';
                            }
                            return '';
                        }
                    },
                    data() {
                        return {
                            tableData: [{
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }]
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123

    ここに画像の説明を挿入します

  • ステップ5: テーブルにチェックボックスを追加する: チェックボックスのあるテーブルを見つけて、チェックボックスのコードをコピーします。

    • ケース図でチェック ボックスをオンにした後、データ行に対してバッチ操作を実行できるため、テーブルにはメソッドが必要です。そのため、チェック ボックスに関するコードをコピーするときは、チェック ボックスのコピーが付いているテーブルもコピーする必要があります。の対応するメソッド (このメソッドを Vue コア オブジェクトに記述することを忘れないでください)。メソッドは次のとおりです。

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

      このメソッドにはプロパティがありますmultipleSelectionしたがって、この属性を独自のコードにコピーする必要があります。最終的な完全なコードは次のとおりです。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <!--表格css样式-->
            <style>
                .el-table .warning-row {
                    background: oldlace;
                }
    
                .el-table .success-row {
                    background: #f0f9eb;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <!--3 从官网复制自己想要的组件代码-->
                <!--表格代码-->
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                        <!--给表格添加复选框-->
                        <el-table-column
                                type="selection">
                        </el-table-column>
                        <!--给表格添加序号-->
                        <el-table-column
                                type="index">
                        </el-table-column>
    
                        <el-table-column
                                prop="brandName"
                                label="品牌名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="companyName"
                                label="企业名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="ordered"
                                label="排序"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="当前状态"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <el-row>
                                <el-button type="primary">修改</el-button>
                                <el-button type="danger">删除</el-button>
                            </el-row>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
    
            <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <!-- 引入样式 -->
            <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
            <!-- 引入组件库 -->
            <script src="element-ui/lib/index.js"></script>
    
            <!--2 创建Vue核心对象-->
            <script>
                new Vue({
                    el : "#app",
                    //表格属性
                    methods: {
                        tableRowClassName({row, rowIndex}) {
                            if (rowIndex === 1) {
                                return 'warning-row';
                            } else if (rowIndex === 3) {
                                return 'success-row';
                            }
                            return '';
                        },
                        // 复选框选中后执行的方法
                        handleSelectionChange(val) {
                            this.multipleSelection = val;
                        }
                    },
                    data() {
                        return {
                            multipleSelection: [],
                            tableData: [{
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }]
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133

    ここに画像の説明を挿入します

    • 出力をチェックボックス メソッドに追加し、成功したかどうかをテストします。コードは次のとおりです。

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

      ブラウザでページを開いた後、図に示すように、開発者ツールを開き、コンソール コントローラーを選択して出力を表示します。

      ここに画像の説明を挿入します

要素フォームコンポーネント

  • ステップ6: フォームを追加する: ケース図のフォームは横型なので、公式 Web サイトで同様のフォーム (つまり、インライン フォーム) を見つけて、コードをコピーします。 コードは次のとおりです。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <!--表格css样式-->
            <style>
                .el-table .warning-row {
                    background: oldlace;
                }
    
                .el-table .success-row {
                    background: #f0f9eb;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <!--3 从官网复制自己想要的组件代码-->
    
                <!--表单代码-->
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="审批人">
                        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域">
                        <el-select v-model="formInline.region" placeholder="活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
    
                <!--表格代码-->
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                        <!--给表格添加复选框-->
                        <el-table-column
                                type="selection">
                        </el-table-column>
                        <!--给表格添加序号-->
                        <el-table-column
                                type="index">
                        </el-table-column>
    
                        <el-table-column
                                prop="brandName"
                                label="品牌名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="companyName"
                                label="企业名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="ordered"
                                label="排序"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="当前状态"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <el-row>
                                <el-button type="primary">修改</el-button>
                                <el-button type="danger">删除</el-button>
                            </el-row>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
    
            <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <!-- 引入样式 -->
            <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
            <!-- 引入组件库 -->
            <script src="element-ui/lib/index.js"></script>
    
            <!--2 创建Vue核心对象-->
            <script>
                new Vue({
                    el : "#app",
                    //表格属性
                    methods: {
                        // 表单方法
                        onSubmit() {
                            console.log('submit!');
                        },
                        // 复选框选中后执行的方法
                        handleSelectionChange(val) {
                            this.multipleSelection = val;
                            //测试与复选框关联的方法是否成功,测试完成后自行删除即可
                            console.log(this.multipleSelection)
                        },
                        // 表格方法
                        tableRowClassName({row, rowIndex}) {
                            if (rowIndex === 1) {
                                return 'warning-row';
                            } else if (rowIndex === 3) {
                                return 'success-row';
                            }
                            return '';
                        }
                    },
                    data() {
                        return {
                            // 表单数据
                            formInline: {
                                user: '',
                                region: ''
                            },
                            // 复选框数据
                            multipleSelection: [],
                            // 表格数据
                            tableData: [{
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }]
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164

    ここに画像の説明を挿入します

  • ステップ7: ケース図と一致するようにフォームを変更します。コードは次のとおりです。

    • フォーム名を変更する場合は、必ず v-model 属性値と Vue オブジェクトの属性値を対応する名前に変更してください。
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <!--表格css样式-->
            <style>
                .el-table .warning-row {
                    background: oldlace;
                }
    
                .el-table .success-row {
                    background: #f0f9eb;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <!--3 从官网复制自己想要的组件代码-->
    
                <!--表单代码-->
                <el-form :inline="true" :model="brand" class="demo-form-inline">
    
                    <el-form-item label="当前状态">
                        <el-select v-model="brand.status" placeholder="当前状态">
                            <el-option label="1" value="启用"></el-option>
                            <el-option label="0" value="禁用"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="企业名称">
                        <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌名称">
                        <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                    </el-form-item>
    
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
    
                <!--表格代码-->
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                        <!--给表格添加复选框-->
                        <el-table-column
                                type="selection">
                        </el-table-column>
                        <!--给表格添加序号-->
                        <el-table-column
                                type="index">
                        </el-table-column>
    
                        <el-table-column
                                prop="brandName"
                                label="品牌名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="companyName"
                                label="企业名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="ordered"
                                label="排序"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="当前状态"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <el-row>
                                <el-button type="primary">修改</el-button>
                                <el-button type="danger">删除</el-button>
                            </el-row>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
    
            <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <!-- 引入样式 -->
            <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
            <!-- 引入组件库 -->
            <script src="element-ui/lib/index.js"></script>
    
            <!--2 创建Vue核心对象-->
            <script>
                new Vue({
                    el : "#app",
                    //表格属性
                    methods: {
                        // 表单方法
                        onSubmit() {
                            console.log(this.brand);
                        },
                        // 复选框选中后执行的方法
                        handleSelectionChange(val) {
                            this.multipleSelection = val;
                            //测试与复选框关联的方法是否成功,测试完成后自行删除即可
                            console.log(this.multipleSelection)
                        },
                        // 表格方法
                        tableRowClassName({row, rowIndex}) {
                            if (rowIndex === 1) {
                                return 'warning-row';
                            } else if (rowIndex === 3) {
                                return 'success-row';
                            }
                            return '';
                        }
                    },
                    data() {
                        return {
                            // 表单数据
                            brand: {
                                status: '',
                                companyName: '',
                                brandName: ''
                            },
                            // 复选框数据
                            multipleSelection: [],
                            // 表格数据
                            tableData: [{
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }]
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170

    ここに画像の説明を挿入します

要素のダイアログ ボックスとフォーム

ここに画像の説明を挿入します

「追加」ボタンをクリックするとダイアログボックスやフォームが表示されるので、ダイアログボックスやフォームを作成する前に追加する必要があります。批量删除そして新增2つのボタン

  • ステップ8: に追加批量删除そして新增ボタン、ダイアログを追加

    公式 Web サイトでダイアログ ボックス コンポーネントを見つけて、ここでは例としてダイアログ ボックスの基本的な使用法を取り上げ、そのコードをコピーします。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <!--表格css样式-->
            <style>
                .el-table .warning-row {
                    background: oldlace;
                }
    
                .el-table .success-row {
                    background: #f0f9eb;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <!--3 从官网复制自己想要的组件代码-->
    
                <!--表单代码-->
                <el-form :inline="true" :model="brand" class="demo-form-inline">
                    <el-form-item label="当前状态">
                        <el-select v-model="brand.status" placeholder="当前状态">
                            <el-option label="1" value="启用"></el-option>
                            <el-option label="0" value="禁用"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="企业名称">
                        <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌名称">
                        <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
    
                <!--批量删除和新增按钮-->
                <el-row>
                    <el-button type="danger" plain>批量删除</el-button>
                    <el-button type="primary">新增</el-button>
                </el-row>
    
                <!--要弹出的对话框-->
                <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="30%"
                        :before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性-->
                    <!--对话框中的表单-->
                    
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
    
                <!--表格代码-->
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                        <!--给表格添加复选框-->
                        <el-table-column
                                type="selection">
                        </el-table-column>
                        <!--给表格添加序号-->
                        <el-table-column
                                type="index">
                        </el-table-column>
    
                        <el-table-column
                                prop="brandName"
                                label="品牌名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="companyName"
                                label="企业名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="ordered"
                                label="排序"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="当前状态"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <el-row>
                                <el-button type="primary">修改</el-button>
                                <el-button type="danger">删除</el-button>
                            </el-row>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
    
            <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <!-- 引入样式 -->
            <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
            <!-- 引入组件库 -->
            <script src="element-ui/lib/index.js"></script>
    
            <!--2 创建Vue核心对象-->
            <script>
                new Vue({
                    el : "#app",
                    //表格属性
                    methods: {
                        // 表单方法
                        onSubmit() {
                            // 测试是否绑定成功:输出到浏览器控制台测试是否将表单数据封装到brand对象中
                            console.log(this.brand);
                        },
                        // 单击对话框右上角x时会弹出的确认关闭框,若不想要将其删除即可
                        handleClose(done) {
                            this.$confirm('确认关闭?')
                                .then(_ => {
                                    done();
                                })
                                .catch(_ => {});
                        },
                        // 复选框选中后执行的方法
                        handleSelectionChange(val) {
                            this.multipleSelection = val;
                            //测试与复选框关联的方法是否成功,测试完成后自行删除即可
                            console.log(this.multipleSelection)
                        },
                        // 表格方法
                        tableRowClassName({row, rowIndex}) {
                            if (rowIndex === 1) {
                                return 'warning-row';
                            } else if (rowIndex === 3) {
                                return 'success-row';
                            }
                            return '';
                        }
                    },
                    data() {
                        return {
                            // 表单数据
                            brand: {
                                status: '',
                                companyName: '',
                                brandName: ''
                            },
                            // 添加数据的对话康初始状态太是否展示
                            dialogVisible: false,
                            // 复选框数据
                            multipleSelection: [],
                            // 表格数据
                            tableData: [{
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }]
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200

    ここに画像の説明を挿入します

  • ステップ9: ダイアログ ボックスにフォームを追加します。コードは次のとおりです。

    • 公式Webサイトでフォームコンポーネントを見つけて変更します
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <!--表格css样式-->
            <style>
                .el-table .warning-row {
                    background: oldlace;
                }
    
                .el-table .success-row {
                    background: #f0f9eb;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <!--3 从官网复制自己想要的组件代码-->
    
                <!--表单代码-->
                <el-form :inline="true" :model="brand" class="demo-form-inline">
                    <el-form-item label="当前状态">
                        <el-select v-model="brand.status" placeholder="当前状态">
                            <el-option label="1" value="启用"></el-option>
                            <el-option label="0" value="禁用"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="企业名称">
                        <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌名称">
                        <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
    
                <!--批量删除和新增按钮-->
                <el-row>
                    <el-button type="danger" plain>批量删除</el-button>
                    <el-button type="primary">新增</el-button>
                </el-row>
    
                <!--要弹出的对话框-->
                <!--单击事件发生后会将dialogVisible属性值设置为true,此时对话框就会打开-->
                <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
                <el-dialog
                        title="编辑品牌"
                        :visible.sync="dialogVisible"
                        width="30%"
                        :before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性-->
                    <!--对话框中的表单-->
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="品牌名称">
                            <el-input v-model="form.brandName"></el-input>
                        </el-form-item>
                        <el-form-item label="企业名称">
                            <el-input v-model="form.companyName"></el-input>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input v-model="form.ordered"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="form.description"></el-input>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-switch v-model="form.status"></el-switch>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="addBrand">提交</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
    
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
    
                <!--表格代码-->
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                        <!--给表格添加复选框-->
                        <el-table-column
                                type="selection">
                        </el-table-column>
                        <!--给表格添加序号-->
                        <el-table-column
                                type="index">
                        </el-table-column>
    
                        <el-table-column
                                prop="brandName"
                                label="品牌名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="companyName"
                                label="企业名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="ordered"
                                label="排序"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="当前状态"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <el-row>
                                <el-button type="primary">修改</el-button>
                                <el-button type="danger">删除</el-button>
                            </el-row>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
    
            <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <!-- 引入样式 -->
            <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
            <!-- 引入组件库 -->
            <script src="element-ui/lib/index.js"></script>
    
            <!--2 创建Vue核心对象-->
            <script>
                new Vue({
                    el : "#app",
                    //表格属性
                    methods: {
                        // 表单方法
                        onSubmit() {
                            // 测试是否绑定成功:输出到浏览器控制台测试是否将表单数据封装到brand对象中
                            console.log(this.brand);
                        },
                        // 单击对话框右上角x时会弹出的确认关闭框,若不想要将其删除即可
                        handleClose(done) {
                            this.$confirm('确认关闭?')
                                .then(_ => {
                                    done();
                                })
                                .catch(_ => {});
                        },
                        //弹出的对话康中表单的添加方法
                        addBrand() {
    
                        },
                        // 复选框选中后执行的方法
                        handleSelectionChange(val) {
                            this.multipleSelection = val;
                            //测试与复选框关联的方法是否成功,测试完成后自行删除即可
                            console.log(this.multipleSelection)
                        },
                        // 表格方法
                        tableRowClassName({row, rowIndex}) {
                            if (rowIndex === 1) {
                                return 'warning-row';
                            } else if (rowIndex === 3) {
                                return 'success-row';
                            }
                            return '';
                        }
                    },
                    data() {
                        return {
                            // 表单数据
                            brand: {
                                status: '',
                                companyName: '',
                                brandName: ''
                            },
                            // 新增按钮弹出的对话框初始状态是否展示的标记,默认为false
                            dialogVisible: false,
                            form: {
                                brandName: '',
                                companyName: '',
                                ordered: '',
                                description: '',
                                status: false
                            },
                            // 复选框数据
                            multipleSelection: [],
                            // 表格数据
                            tableData: [{
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }]
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233

    ここに画像の説明を挿入します

  • ステップ10: 手順は次のとおりで、コードは次のとおりです

    • 与える新增ボタン バインディング クリック イベント (1 回のクリックの間)新增ボタンをクリックするとダイアログ フォームがポップアップ表示されます
    • 付属のフォームを変更する提交ボタンにバインドされたクリック イベントに対応するメソッド: メソッドを次のように変更します。addBrand, ボタンをクリックしている限り、ダイアログ フォームは自動的に送信されます。
    • ダイアログボックスには、确定取消ボタン削除
    • フォームが付属しています取消ボタンはクリック イベントにバインドされており、ボタンをクリックしている間はダイアログ フォームが消えます。
    • フォームにバインドされているモデルは、form(今すぐmodel="form")、その属性値を次のように変更します。brand、ブランド オブジェクト内のデータを完成させます
    • ステータス スイッチを 0 または 1 に設定します。公式 Web サイトで対応するスイッチ コンポーネントを見つけて、対応する属性に従って属性値を 0 または 1 に設定します。
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <!--表格css样式-->
            <style>
                .el-table .warning-row {
                    background: oldlace;
                }
    
                .el-table .success-row {
                    background: #f0f9eb;
                }
            </style>
        </head>
        <body>
            <div id="app">
                <!--3 从官网复制自己想要的组件代码-->
    
                <!--表单代码-->
                <el-form :inline="true" :model="brand" class="demo-form-inline">
                    <el-form-item label="当前状态">
                        <el-select v-model="brand.status" placeholder="当前状态">
                            <el-option label="1" value="启用"></el-option>
                            <el-option label="0" value="禁用"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="企业名称">
                        <el-input v-model="brand.companyName" placeholder="企业名称"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌名称">
                        <el-input v-model="brand.brandName" placeholder="品牌名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
    
                <!--批量删除和新增按钮-->
                <el-row>
                    <el-button type="danger" plain>批量删除</el-button>
                    <!--新增按钮绑定单击事件:只要一单击`新增`按钮就弹出对话框表单-->
                    <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
                </el-row>
    
                <!--要弹出的对话框-->
                <!--单击事件发生后会将dialogVisible属性值设置为true,此时对话框就会打开-->
                <el-dialog
                        title="编辑品牌"
                        :visible.sync="dialogVisible"
                        width="30%"
                        :before-close="handleClose"><!--before-close是为右上角x绑定方法用的属性-->
                    <!--对话框中的表单-->
                    <el-form ref="form" :model="brand" label-width="80px">
                        <el-form-item label="品牌名称">
                            <el-input v-model="brand.brandName"></el-input>
                        </el-form-item>
                        <el-form-item label="企业名称">
                            <el-input v-model="brand.companyName"></el-input>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input v-model="brand.ordered"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="brand.description"></el-input>
                        </el-form-item>
                        <el-form-item label="状态">
                            <!--将状态开关值设为1、0-->
                            <el-switch v-model="brand.status" active-value="1" inactive-value="0"></el-switch>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="addBrand">提交</el-button>
                            <el-button @click="dialogVisible = false">取消</el-button>
                        </el-form-item>
                    </el-form>
    
                </el-dialog>
    
                <!--表格代码-->
                <template>
                    <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            @selection-change="handleSelectionChange"><!--给表格添加handleSelectionChange方法-->
                        <!--给表格添加复选框-->
                        <el-table-column
                                type="selection">
                        </el-table-column>
                        <!--给表格添加序号-->
                        <el-table-column
                                type="index">
                        </el-table-column>
    
                        <el-table-column
                                prop="brandName"
                                label="品牌名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="companyName"
                                label="企业名称"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="ordered"
                                label="排序"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="status"
                                label="当前状态"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <el-row>
                                <el-button type="primary">修改</el-button>
                                <el-button type="danger">删除</el-button>
                            </el-row>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
    
            <!--1 引入vue.js文件、element的index.css文件和index.js文件-->
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <!-- 引入样式 -->
            <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
            <!-- 引入组件库 -->
            <script src="element-ui/lib/index.js"></script>
    
            <!--2 创建Vue核心对象-->
            <script>
                new Vue({
                    el : "#app",
                    //表格属性
                    methods: {
                        // 表单方法
                        onSubmit() {
                            // 测试是否绑定成功:输出到浏览器控制台测试是否将表单数据封装到brand对象中
                            console.log(this.brand);
                        },
                        // 单击对话框右上角x时会弹出的确认关闭框,若不想要将其删除即可
                        handleClose(done) {
                            this.$confirm('确认关闭?')
                                .then(_ => {
                                    done();
                                })
                                .catch(_ => {});
                        },
                        //弹出的对话框中单击提交按钮后表单的添加方法
                        addBrand() {
                            console.log(this.brand);
                        },
                        // 复选框选中后执行的方法
                        handleSelectionChange(val) {
                            this.multipleSelection = val;
                            //测试与复选框关联的方法是否成功,测试完成后自行删除即可
                            console.log(this.multipleSelection)
                        },
                        // 表格方法
                        tableRowClassName({row, rowIndex}) {
                            if (rowIndex === 1) {
                                return 'warning-row';
                            } else if (rowIndex === 3) {
                                return 'success-row';
                            }
                            return '';
                        }
                    },
                    data() {
                        return {
                            // 品牌模型数据
                            brand: {
                                id: '',
                                brandName: '',
                                companyName: '',
                                status: '',
                                ordered: '',
                                description: ''
                            },
                            // 新增按钮弹出的对话框初始状态是否展示的标记,默认为false
                            dialogVisible: false,
                            form: {
                                brandName: '',
                                companyName: '',
                                ordered: '',
                                description: '',
                                status: false
                            },
                            // 复选框数据
                            multipleSelection: [],
                            // 表格数据
                            tableData: [{
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }, {
                                brandName: '小米',
                                companyName: '小米科技有限公司',
                                ordered: '10',
                                status: '启用'
                            }]
                        }
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233

    ここに画像の説明を挿入します

要素ページングツールバー

  • ステップ11: 公式 Web サイトにアクセスしてページング コンポーネントを見つけ、対応するコードをコピーして、対応する変更を加えます。コードは次のとおりです。

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

    ここに画像の説明を挿入します