Vue 페이지 와 입력 상자 키워드 선별 기능 구현

페이지 별 구현(Vue+Element)+입력 상자 키워드 선별
1.Element 자체 페이지 구성 요 소 를 사용 합 니 다.

<template>
<div class="sales-table">
<div class="order-list-header">    </div>
<div class="back-box">
<div class="search-box"><input type="text" name="" id="" class="order-search-input" placeholder="   " v-model='search'></div>
</div>
<div class="table-box">
<div class="table-list" v-for="(cash, index) in orderList.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="cash.id">
<table id="tableSort" style="table-layout:fixed;">
<thead class="table-header">
<tr>
<th class="left-radius">  </th>
<th>    </th>
<th>  ID</th>
<th>      </th>
<th>    ID</th>
<th>      </th>
<th>      </th>
<th>    </th>
<th>    </th>
<th>    </th>
<th>   </th>
<th>    </th>
<th>    </th>
<th>    </th>
<th class="right-radius">  </th>
</tr>
</thead>
<tbody class="table-lists">
<tr class="first-tr">
<td class="sequence">{{ index+1>9?index+1:"0"+(index+1) }}</td>
<td class="sequence">{{cash.createTime}}</td>
<td class="sequence">{{cash.orderId}}</td>
<td class="sequence">{{cash.cilentName}}</td>
<td class="sequence">{{cash.cilentId}}</td>
<td class="sequence">{{cash.cilentPhone}}</td>
<td class="sequence">{{cash.cilentGrade}}</td>
<td class="sequence money">￥{{cash.orderPrice}}</td>
<td class="sequence">{{cash.orderState}}</td>
<td class="sequence">{{cash.auditState}}</td>
<td class="sequence">{{cash.receiver}}</td>
<td class="sequence">{{cash.phone}}</td>
<td class="sequence">{{cash.address}}</td>
<td class="sequence">{{cash.orderRemark}}</td>
<td class="sequence"><a class="view-order">  </a><a class="edit-order">  </a><a class="delete-order">  </a></td>
</tr>
</tbody>
</table>
</div>
</div>
<--    -->
<div class="page">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 40]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="Cashdata.length">
</el-pagination>
</div>
</div>
</template>

2.글 에서 빨간색 으로 표 시 된 글 자 는 더 이상 순환 배열 이 아니 라 이름 을 마음대로 지 으 며 뒤에서 키워드 부분 을 검색 해도 빨간색 으로 표 시 됩 니 다.데이터 다 페이지 효과 가 더욱 뚜렷 해 집 니 다.

<script>
export default {
data() {
　　return {
　　　　currentPage:1, //   
　　　　pagesize:10,//     //      
　　　　search:"",
　　　　Cashdata: [{
　　　　　　createTime:"2019/1/21/ 14:30:30",
　　　　　　orderId: "1555555454",
　　　　　　cilentName:"  ",
　　　　　　cilentId:"21313216544",
　　　　　　cilentPhone:"13976605432",
　　　　　　cilentGrade:"1",
　　　　　　orderPrice:"454664",
　　　　　　orderState:"   ",
　　　　　　auditState: "     ",
　　　　　　receiver: "   ",
　　　　　　phone:"16565644444",
　　　　　　address:"      *************************",
　　　　　　orderRemark:"   ，           "
　　　　},
　　　　{
　　　　　　createTime:"2019/1/21/ 14:30:30",
　　　　　　orderId: "1555555454",
　　　　　　cilentName:"  ",
　　　　　　cilentId:"21313216544",
　　　　　　cilentPhone:"15576605432",
　　　　　　cilentGrade:"1",
　　　　　　orderPrice:"454664",
　　　　　　orderState:"   ",
　　　　　　auditState: "     ",
　　　　　　receiver: "   ",
　　　　　　phone:"16565644444",
　　　　　　address:"      *************************",
　　　　　　orderRemark:"   ，           "
　　　　　　},
　　　　　]};
　　　　},
　　　　methods: {
　　　　　　//    currentPage、       pagesize   data
　　　　　　handleSizeChange: function (size) {
　　　　　　this.pagesize = size;
　　　　　　console.log(this.pagesize) //        
　　　　　},
　　　　　　handleCurrentChange: function(currentPage){
　　　　　　　　this.currentPage = currentPage;
　　　　　　　　document.documentElement.scrollTop = 0;//           
　　　　　　　　console.log(this.currentPage) //     
　　　　　　},
　　　　　},
　　//          
　　　computed: {
　　　　orderList: function() {
　　　　var _search = this.search;
　　　　if (_search) {
　　　　　　return this.Cashdata.filter(function(product) {
　　　　　　return Object.keys(product).some(function(key) {
　　　　　　return String(product[key]).toLowerCase().indexOf(_search) > -1
　　　　})
　　})
　　}
　　　　return this.Cashdata;
　　　　}
　　}
};
</script>

3.페이지 를 나 누 는 CSS 는 스스로 수정 한 부분 일 뿐 이 니 필요 하 다 면 스스로 뇌 보 를 하 세 요.참,한 마디 덧 붙 여 Eleement 스타일 을 수정 할 때,먼저 스타일 앞 에/deep/.최 외층 클래스{...}을 추가 합 니 다.

<style lang="scss" scoped>
/deep/.el-pagination{
 margin-bottom: 30px;
 margin-top: 30px;
 float: right;
 font-size: 20px;
 color: #333333;
 margin-right: 55px;
 font-weight: normal;

 .el-select .el-input{
 width: 126px;
 height: 36px;
 }
 .el-select .el-input .el-input__inner{
 height: 100%;
 font-size: 20px;
 color: #333333;
 }
 .el-pagination__editor.el-input .el-input__inner{
 height: 36px;
 }
 .btn-prev,.btn-next{
 height: 36px;
 }
 .btn-prev{
 border-radius: 5px 0 0 5px;
 }
 .btn-next{
 border-radius: 0 5px 5px 0;
 }
 .el-pager li{
 line-height: 36px;
 height: 36px;
 font-size: 20px;
 }
 .el-pagination__total{
 color: #333333;
 }
 button,span:not([class*=suffix]){
 height: 36px;
 line-height: 36px;
 font-size: 20px;
 color: #333333;
 }
 .el-pagination__editor.el-input{
 font-size: 20px;
 }
 }
</style>

4.문제 가 있 으 면 가르침 을 환영 합 니 다.
효과 도 1 부 첨부:

총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 Vue 가 페이지 와 입력 상자 의 키워드 선별 기능 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!