나는 기사를 한동안 업데이트하지 않았다. 정말 부끄러워요.
한밤중에 기사를 게시하여 BootPage라는 Vue 위젯을 공유했습니다.
vue.js를 이해하지 못하면 이전 기사 "vue.js에 대한 간단한 이야기"로 이동하여 이에 대해 배울 수 있습니다.
부트 페이지 구성 요소 소개
실제로, 그것은 고급 구성 요소가 아닙니다. 반대로, 그것은 실제로 간단한 테이블 페이징 구성 요소 일뿐입니다. 최근 프로젝트에서 테이블 페이징 구성 요소가 필요하기 때문입니다. VUE 공식 구성 요소 라이브러리 페이지 매김 구성 요소는 나에게 너무 강력하거나 적합하지 않으므로 직접 썼습니다. 나와 같은 사람은 간단한 페이징 기능을 구현하기 위해 간단한 페이징 구성 요소가 필요할 것입니다. 나는 여기서 그것을 공유 할 것이고, 모두가 구덩이를 채울 것입니다.
고급 구성 요소가 필요한 경우 공식 VUE 구성 요소 라이브러리로 이동할 수 있습니다 : https://github.com/vuejs/awesome-vue#libraries--plugins
BootPage는 정적 데이터 및 서버 데이터를 지원하는 테이블 페이징 구성 요소입니다. 각 페이지에 표시된 행 수와 표시된 페이지 수를 조정하는 것이 지원됩니다. 스타일은 다음과 같이 부트 스트랩을 기반으로합니다.
온라인 데모 : https : //luozhihao.github.io/b ...
사용 방법
.Vue 구성 요소 파일에서 이와 같은 템플릿, 즉 HTML 코드를 작성합니다.
<TABLE> <THEAD> <TR> <th> ID </th> <th> 이름 </th> <th> 내용 </th> <th> 컨텐츠 </th> <th> 비고 </th> </th> </th> </thead> <tbody> <ttr v-for = "tableList"> <td v-text = "data.num"> </td> <td> <td>. v- 텍스트 = "data.contents"> </td> <td v-text = "data.remark"> </td> </tbody> <tfoot> <td> <td colspan = "4"> <div> <button v-on : "새로 고침"> 새로 고침 </button> </div> </tbody> <tfot " : page-len = "pagelen": param = "param"> </boot-page> </div> </td> </td> </tfoot> </table>
<boot-page> tag async에서 서버 쪽에서 데이터를 얻을 것인지, 거짓은 아니오; 데이터는 정적 테이블 데이터 배열입니다. 렌즈는 페이지 당 표시되는 행의 배열입니다. Page-Len은 표시 할 수있는 페이지 수입니다.
정적 데이터를 사용하는 자바 스크립트 코드, 즉 스크립트 태그의 내용은 다음과 같습니다.
<components/bootpage.vue 'export default {data () {return {lenarr : [10, 50, 100], // pagelen 당 디스플레이 길이 : 5, // 표시 될 수있는 페이지 수 : [{num : 1, luozh', 'bootpage :'bootpage : 'bootpage :'bootpage : 'bootpage :'bootpage : 'bootpage :'bootpage : 'bootpage :'bootpage : 'bootpage : [return {lenarr : [10, 50, 100], pagelen 당 디스플레이 길이 : // 표시 부팅 페이지를 가져옵니다. 'dsds'}, {num : 2, author : 'luozh', 내용 : '페이지 당 표시되는 행 수와 표시된 페이지 수를 조정하는 지원. 스타일은 부트 스트랩을 기반으로합니다. 'dsds'}, {num : 5, 저자 : 'luozh', 내용 : '렌즈는 페이지 당 표시되는 행의 배열', 비고 : 'dsds'}, {num : 6, 저자 : 'luozh', contents : '페이지 렌트가 표시 될 수있는 수 :'dsds '}, 7, loogh' 반환 매개 변수는 {data : [], page_num : 6}이며, 여기서 데이터는 표 형식 데이터이고 Page_num은 총 페이지 수입니다. 서버 데이터를 사용하는 경우 : [] // 페이지 매김 구성 요소}}}}, 구성 요소 : {bootpage}, 이벤트 : {// pagination 구성 요소에 의해 반환 된 테이블 데이터 '(data) {this.tableIst = data}} </script>일반적으로 정적 표 형 데이터를 거의 사용하지 않으며 대부분의 응용 프로그램 데이터는 서버 측에서 얻어 지므로 서버 페이지 매김 데이터를 얻는 방법이 있습니다.
서버 데이터를 사용하는 구성 요소 HTML은 다음과 같습니다.
<boot-page v-ref : page : async = "true": lens = "lenarr": url = "url": page-len = "pagelen": param = "param"> </boot-page>
여기서 URL은 서버의 요청 주소입니다. Param은 서버로 전송 해야하는 매개 변수 객체입니다.
서버 데이터 JavaScript를 사용하는 코드는 다음과 같습니다.
<components/bootpage.vue 'export default {data () {return {lenarr : [10, 50, 100], // 페이지 당 표시 길이 세트 pagelen : 5, // url로 표시 될 수있는 페이지 수 :'/bootpage/', // request path}, // pasure tablist tablelist the server : // Pagination Component}}, 메소드 : {refresh () {this. $ refs.page.refresh () // 테이블 새로 고침 기능이 제공됩니다}}, 구성 요소 : {bootPage}, 이벤트 : {// Pagination Component가 반환하는 테이블 데이터 (여기서 서버가 반환 한 데이터) ''(데이터) {데이터}, // refresh}. this.refresh ()}}}} </script>참고 : 구성 요소 테이블에 전달 된 배열 컨텐츠 외에도 서버는 Page_num이라는 총 페이지 수의 키 이름도 필요합니다.
구성 요소가 서버에 제공되는 매개 변수는 다음과 같습니다.
{
활성 : 1, // 현재 페이지 번호
길이 : 5 // 페이지 당 표시된 수
}
서버 리턴의 매개 변수는 다음과 같습니다.
{
데이터 : [], // Tabular Data
page_num : 5 // 총 페이지 수
}
구성 요소 소스 코드
Pagination의 구현은 여기에 소스 코드를 표시하지 않습니다. 모든 소스 코드를 내 github에 업로드했는데 주소는 https://github.com/luozhihao/bootpage입니다.
미리 상기시켜 드리겠습니다.이 구성 요소를 몰아내는 데 몇 시간이 걸렸으므로 VUE 구성 요소의 형식과 사양에 부적절했고 완전히 독립적이지 않았기 때문에 의식적으로 구덩이를 채 웁니다. 나는 여기서만 공유 할 것입니다.
물론 프로젝트 사용에 맞게 구성 요소의 코드를 의지 할 수도 있습니다. 결국, 크고 완전한 페이징 구성 요소를 구현하는 것은 매우 복잡합니다.
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 자습서"로 편집되었으며 모두가 배우고 읽을 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.