기술나눔

빅 데이터------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开发环境, 공식 웹사이트로 이동하여 해당하는 것을 다운로드할 수 있습니다.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 코드 영역(in<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-onHTML 태그에 이벤트 바인딩
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: 요소를 조건부로 렌더링하고, 참이라고 판단되면 렌더링하고, 그렇지 않으면 렌더링하지 않습니다.

    • 함께 사용하면 다음과 같습니다.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 사례

  • 목표: Vue를 사용하여 브랜드 쿼리를 단순화하고 기능을 추가합니다.
  • 이 사건은 다음과 같이 시작됩니다.Axios와 JSON 종합 사례이를 바탕으로 이 프로젝트는 다음과 같이 명명됩니다.VueDemo, Gitee에 업로드되었으며 다음을 수행할 수 있습니다.직접 다운로드하세요

모두 검색

여기에 이미지 설명을 삽입하세요.

  • brand.html변경된 내용은 다음과 같습니다

    여기에 이미지 설명을 삽입하세요.

  • brand.html코드 변경 사항은 다음과 같습니다.

    • vue.js 파일 소개
    • 데이터 바인딩을 위한 Vue 핵심 객체 생성
    • 사용mounted이 메서드는 페이지가 로드된 후 비동기 요청을 보내고 데이터를 쿼리합니다.
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
            <div id="app">
                <table border="1" cellspacing="0">
                    <tr>
                        <th>序号</th>
                        <th>品牌名称</th>
                        <th>企业名称</th>
                        <th>排序</th>
                        <th>品牌介绍</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    <!--使用v-for循环遍历-->
                    <tr v-for="(brand,i) in brands" align="center">
                        <td>{{i + 1}}</td>
                        <td>{{brand.brandName}}</td>
                        <td>{{brand.companyName}}</td>
                        <td>{{brand.ordered}}</td>
                        <td>{{brand.description}}</td>
                        <td>{{brand.status == 1 ? "启用" : "禁用"}}</td>
                        <td><a href="#">修改</a><a href="#">删除</a></td>
                    </tr>
                </table>
            </div>
            <script src="js/axios-0.18.0.js"></script>
            <script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
            <script>
                new Vue({
                    el: "#app",
                    data() {
                        return {
                            brands:[]
                        }
                    },
                    // 页面加载完成后利用mounted方法发送异步请求并查询数据
                    mounted() {
                        // 发送异步请求并查询数据
                        // 在Vue的实例方法中,this指向Vue实例本身
                        var _this = this;
                        axios({
                            method:"get",
                            url:"http://localhost:8080/VueDemo/selectAllServlet"
                        }).then(function (resp) {
                            // 获取响应数据,并将数据赋给brands
                            // 错误写法:this.brands = resp.data;
                            /* 在Axios的then方法的回调函数中,this可能指向其他对象,通常是全局对象(在浏览器中是 window 对象)
                                所以需要提前将代指Vue示例本身的this赋给_this
                             */
                            //axios会自动将获取的JSON字符串数据转为js对象数组
                            _this.brands = resp.data;
                        })
                    }
                })
            </script>
        </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62

    Tomcat이 웹 프로젝트를 실행한 후의 스크린샷은 다음과 같습니다.

    여기에 이미지 설명을 삽입하세요.

  • 질문

    • 왜 그럴까요?var _this = this, 왜 직접적으로this.brands=resp.data

      자바스크립트에서 this 키워드의 동작은 키워드가 호출되는 컨텍스트에 따라 달라집니다. Vue의 인스턴스 메소드에서는this Vue 인스턴스 자체를 가리킵니다.하지만 Axios에서는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이 웹 프로젝트를 실행한 후 실행되는 스크린샷은 다음과 같습니다.

    여기에 이미지 설명을 삽입하세요.

요소

  • 정의

    • 웹 페이지를 빠르게 구축하는 데 사용할 수 있는 Vue 기반 웹 사이트 구성 요소 라이브러리 세트입니다.
    • 구성 요소: 하이퍼링크, 버튼, 그림, 표 등 웹 페이지를 구성하는 구성 요소입니다.
    • 기반으로 할 수 있습니다엘리먼트 공식 홈페이지공부하다
  • 알아채다:

    • 빠른 시작에 사용됨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디렉토리는 웹 프로젝트(예: webapp)의 핵심 디렉토리 아래에 배치된 다음 가져옵니다.element-uiCSS, JS 파일

    • 로컬 Element CSS 및 js 파일 소개

      <!-- 引入样式 -->
      <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
      <!-- 引入组件库 -->
      <script src="element-ui/lib/index.js"></script>
      
      • 1
      • 2
      • 3
      • 4
    • 원격 요소의 CSS 및 js 파일을 소개합니다.

      <!-- 引入样式 -->
      <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단계: 요소공식 웹 사이트요소 구성 요소 코드 복사

  • 기본 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개밖에 없는데 이 그리드가 기본 그리드 24개의 너비를 차지합니다.
      • 두 번째 행에는 2개의 셀이 있으며, 각 셀은 12개의 기본 셀 너비를 차지합니다.
      • 다음 몇 줄도 마찬가지다.
  • 단계:

    • 1단계: vue.js 파일, 요소의 index.css 파일 및 index.js 파일 소개

    • 2단계: Vue 핵심 객체 생성

    • 3단계: 공식 웹사이트에서 원하는 구성요소 코드를 복사하세요.

      • 가다공식 웹사이트에서 레이아웃 구성요소를 찾으세요., 기본 레이아웃을 예로 들면, 공식 코드에는 다음과 같이 html 코드와 css 코드가 포함되어 있음을 발견했습니다.
      • <style>태그 본문에는 외부에 소개하거나 HTML 페이지에 직접 작성할 수 있는 CSS 스타일 코드가 포함되어 있습니다.
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      
      <style>
        .el-row {
          margin-bottom: 20px;
          &:last-child {
            margin-bottom: 0;
          }
        }
        .el-col {
          border-radius: 4px;
        }
        .bg-purple-dark {
          background: #99a9bf;
        }
        .bg-purple {
          background: #d3dce6;
        }
        .bg-purple-light {
          background: #e5e9f2;
        }
        .grid-content {
          border-radius: 4px;
          min-height: 36px;
        }
        .row-bg {
          padding: 10px 0;
          background-color: #f9fafc;
        }
      </style>
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
  • 전체 코드 예시

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

    브라우저를 통해 HTML 페이지를 열면 스크린샷은 다음과 같습니다.

    여기에 이미지 설명을 삽입하세요.

컨테이너 레이아웃 컨테이너

여기에 이미지 설명을 삽입하세요.

  • 정의: 페이지 기본 구조의 빠른 구성을 용이하게 하기 위해 레이아웃에 사용되는 컨테이너 구성 요소

  • 설명: 위 그림과 같이 왼쪽 네비게이션 바가 있는 레이아웃입니다.

  • 단계:

    • 1단계: vue.js 파일, 요소의 index.css 파일 및 index.js 파일 소개

    • 2단계: Vue 핵심 객체 생성

    • 3단계: 공식 웹사이트에서 원하는 구성요소 코드를 복사하세요.

      • 공식 웹 사이트 사진에 표시된 첫 번째 사례를 예로 들어 보겠습니다.

        여기에 이미지 설명을 삽입하세요.

      • 이 예에는 html 및 css 코드 외에도 다음과 같은 Vue 객체의 속성도 있습니다.

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

        다음과 같이 공식 웹사이트 인스턴스의 Vue 속성을 자체 Vue 핵심 개체에 복사할 수 있습니다.

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

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

    브라우저를 통해 HTML 페이지를 열면 스크린샷은 다음과 같습니다.

    여기에 이미지 설명을 삽입하세요.

요소 케이스

아래와 같이 효과를 만들어 보세요.

여기에 이미지 설명을 삽입하세요.

요소 테이블 구성요소

  • 1 단계: 공식 웹사이트로 이동하여 해당 양식의 예시를 복사하세요.상태 양식이 있는 공식 웹사이트예) 코드는 다음과 같습니다.

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

    그림과 같이 브라우저가 html 페이지를 연 후 대략적인 그림을 얻은 후 조정을 시작합니다.

    여기에 이미지 설명을 삽입하세요.

  • 2 단계: 1단계에서 얻은 테이블에 컬럼과 데이터를 추가하고 컬럼명을 수정합니다.

    • 삭제width각 열은 속성 다음에 너비가 자동으로 조정됩니다.

    • 테이블 내용을 중앙에 배치: 공식 웹사이트의 해당 테이블 구성 요소 섹션에서 아래로 스크롤하여 그림에 표시된 대로 해당 메서드와 속성을 찾습니다.속성 설정align="center"

      여기에 이미지 설명을 삽입하세요.

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

    여기에 이미지 설명을 삽입하세요.

  • 3단계: 테이블에 작업 열 추가

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

    여기에 이미지 설명을 삽입하세요.

  • 4단계: 테이블에 일련번호 추가: 공식 웹사이트에서 일련번호가 있는 테이블을 찾아 일련번호 추가용 코드를 복사하세요.

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

    여기에 이미지 설명을 삽입하세요.

  • 5단계: 테이블에 체크박스 추가: 체크박스가 있는 테이블을 찾아 체크박스의 코드를 복사하세요.

    • 케이스 다이어그램에서 체크박스를 선택한 후 데이터의 행에 대해 일괄 작업을 수행할 수 있으므로 테이블에는 메소드가 있어야 하므로 체크박스에 대한 코드를 복사할 때 체크박스가 있는 테이블도 복사해야 합니다. 해당 메소드(Vue 핵심 객체에 이 메소드를 작성하는 것을 잊지 마세요), 메소드는 다음과 같습니다

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

      이 메서드에는 속성이 있습니다.multipleSelection이므로 이 속성을 자체 코드에 복사해야 합니다. 최종 전체 코드는 다음과 같습니다.

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

    여기에 이미지 설명을 삽입하세요.

    • 체크박스 메서드에 출력을 추가하고 테스트하여 성공했는지 확인합니다.

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

      브라우저에서 페이지를 연 후 개발자 도구를 열고 → 콘솔 컨트롤러를 선택하여 그림과 같이 출력을 봅니다.

      여기에 이미지 설명을 삽입하세요.

요소 형태 구성 요소

  • 6단계: 양식 추가: 케이스 다이어그램의 양식이 가로형이므로 공식 홈페이지에서 유사한 양식(즉, 인라인 양식)을 찾아 코드를 복사하면 다음과 같습니다.

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

    여기에 이미지 설명을 삽입하세요.

  • 7단계: 사례 다이어그램과 일치하도록 양식을 수정합니다. 코드는 다음과 같습니다.

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

    여기에 이미지 설명을 삽입하세요.

요소 대화 상자 및 양식

여기에 이미지 설명을 삽입하세요.

추가 버튼을 누르면 대화 상자와 폼이 팝업되므로 대화 상자와 폼을 만들기 전에 먼저 추가해야 합니다.批量删除그리고新增버튼 두 개

  • 8단계: 다음에 추가批量删除그리고新增버튼, 대화상자 추가

    공식 웹사이트에서 대화 상자 구성 요소를 찾으세요. 여기서는 대화 상자의 기본 사용법을 예로 들어 해당 코드를 복사합니다.

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

    여기에 이미지 설명을 삽입하세요.

  • 9단계: 대화 상자에 양식을 추가하면 코드는 다음과 같습니다.

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

    여기에 이미지 설명을 삽입하세요.

  • 10단계: 단계는 다음과 같으며 코드는 다음과 같습니다.

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

    여기에 이미지 설명을 삽입하세요.

요소 페이징 도구 모음

  • 11단계: 공식 웹사이트로 이동하여 페이징 구성 요소를 찾아 해당 코드를 복사하고 해당 코드를 수정합니다.

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

    여기에 이미지 설명을 삽입하세요.