vue+iview 페이지 구성 요소 봉인
1.components에서pagination 폴더를 만들고 src,index를 만듭니다.js,index.less 파일
2.index.less 파일
//
.ivu-page-options {
margin-left: 10px;
.ivu-page-options-sizer {
margin-right: 0;
}
}
3.index.js 파일
import "./index.less";
import component from "./src/main";
/* istanbul ignore next */
component.install = function (Vue) {
Vue.component(component.name, component);
};
export default component;
4.src 폴더의main.vue
<template>
<!-- -->
<Page
class="saas-pagination"
ref="page"
:loading="loading"
:disabled="disabled"
:total="total"
:show-sizer="sizer"
:show-elevator="elevator"
:current="params.page"
:page-size="params.rows"
:page-size-opts="sizeOpts"
@on-change="currentChange"
@on-page-size-change="pageChange"/>
</template>
<script>
export default {
props: {
loading: {
type: Boolean,
default: false
},
total: {
//
type: [String, Number],
default: 0
},
page: {
//
type: [String, Number],
default: 1
},
rows: {
//
type: [String, Number],
default: 10
},
disabled: {
type: Boolean,
default: false
},
sizer: {
//
type: Boolean,
default: false
},
elevator: {
//
type: Boolean,
default: false
}
},
watch: {
page (to) {
this.params.page = to;
},
rows (to) {
this.params.rows = to;
}
},
data () {
return {
sizeOpts: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
params: {
page: 1,
rows: 10
}
}
},
methods: {
//
currentChange (current) {
this.params.page = current;
this.onChange();
},
//
pageChange (rows) {
this.params.page = 1;
this.params.rows = rows;
this.onChange();
},
onChange () {
this.$emit("on-change", JSON.parse(JSON.stringify(this.params)));
},
reset () {
this.params = {
page: 1,
rows: 10
}
this.onChange();
//
// this.$refs.page.currentPage = 1;
}
}
}
</script>
5. 구성 요소에 인덱스를 만듭니다.js, 전역 도입에 사용
import GlobalPage from "@/components/pagination/index.js";
export default (Vue) => {
Vue.component("GlobalPage ", GlobalPage );
}
6 그리고 전역main.js 도입, 전역 사용 가능
import components from "@/components/index.js";
Vue.use(components)
7. 구성 요소의 사용
<template>
<div>
<global-page
ref="pagination"
:sizer="true"
:page="formData.page"
:rows="formData.rows"
:total="total"
@on-change="pageChange">
</global-page>
</div>
</template>
<script>
export default {
data(){
return {
total: 0, //
queryForm:{},
formData: {
page: 1,
rows: 10,
}
}
},
methods: {
//
pageChange (params) {
this.queryForm.page = params.page
this.queryForm.rows = params.rows
//
this.search(this.queryForm)
},
}
}
</script>
vue에 관하여.js 구성 요소의 강좌입니다. 테마를 클릭하십시오vue.js 구성 요소 학습 강좌 공부를 합니다.이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.