团队冲刺(6)

今天做了:

优化搜索过程,优化数据展示, 加标题条超链接 , 优化分页功能]

<template>
<div >
    <!-- 查询框部分 -->
    <el-row>
        <el-col :span="12" :offset="6" style="margin-top: 25px;">
          
            <el-input type="text" placeholder="请输入标题" v-model="keyword" >
                <el-button slot="prepend" type="primary" @click="gohighSearch">高级检索</el-button>
                <el-button slot="append" type="primary" @click="search" >搜索</el-button>
            </el-input>
        </el-col>
    </el-row>
<br />
  
 <div class="showlist">
     <!-- <el-row class="art-item" v-model="bookList"  v-for="userblog in searchList.content"> -->
    <el-row class="art-item" v-model="bookList"  v-for="userblog in bookList">
      <el-card shadow="hover" style="height: 220px">
        <el-row class="art-info d-flex align-items-center justify-content-start">
          <div class="art-time" align="left"><i class="el-icon-apple"></i>作者:   </i>{{userblog.author}}
          <i class="el-icon-time"></i>: {{ userblog.date }}
          </div>
          <div class="d-flex align-items-center">
            <div class="art-title">
              <a :href="'view?url='+userblog.url+'&name=userblog.document.title&type=inline'">{{userblog.title}}</a>
              <!-- {{userblog.title}} -->
            </div>
          </div>
        </el-row>
        <el-row class="art-body">
          <div class="side-abstract">
            <div class="art-abstract">
              {{userblog.Abstract}}
            </div>  
            <div class="art-more">
                 <!--?url=userblog.document.url&name=userblog.document.title&type=inline <router-link :to="{name: 'view?url=Document . url&name=...', params:{'url':userblog.url} }" tag="span"> -->
                 <!-- <router-link :to="{name: 'bookMore2', params:{'title':userblog.title} }" tag="span"> -->
                 <!-- <button ><a :href="'view?url='+userblog.url+'&name=userblog.document.title&type=inline'">查看文章</a></button> -->
                 <!-- <el-button style="border-radius: 200px; margin-top: 50px; margin-left: 500px" @click="toDown(userblog.url)">下载文章</el-button> -->
                <!--    .document -->
                <el-button style="border-radius: 200px; margin-top: 50px"><a :href="'view?url='+userblog.url+'&name=userblog.document.title&type=inline'">查看文章</a></el-button>
                <el-button style="border-radius: 200px; margin-top: 50px;margin-left: 500px"><a :href="'view?url='+userblog.url+'&name=userblog.document.title&type=attachment'">下载文章</a></el-button>
            </div>
          </div>
        </el-row>
      </el-card>
    </el-row>
    
    <!-- 分页插件部分 -->
    <!-- <el-row>
        <el-col :span="16" :offset="4"> -->
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 2, 50, 100]"
                    :page-size="pageSize"
                    layout="total,sizes, prev, pager, next, jumper"
                    :total="total"> 
            </el-pagination>
        <!-- </el-col>
    </el-row> -->
    </div>
</div>
</template>

<script>
import { mapState } from "vuex";

export default {

  //自动派发
  mounted() {
    //派发action,通知vuex发请求
    this.$store.dispatch("getBookList");
  },
  computed: {
    ...mapState({
      bookList: (state) => state.book.bookList,
      searchList: (state) => state.item.searchList,
    }),
  },
  data(){
    return{
       currentPage: 1, // 初始页码
       pageSize: 2, // 每页的数据   searchList.size
       total: 100, // 总记录数      searchList.totatotalElementslPages
       keyword: "", // 关键词
    }
  },
  // mounted() {
  //   //在发请求之前:整理用户搜索的参数
  //   //组件挂载完毕发一次请求
  //   this.getData();
  //   //获取用户信息
  // },
  methods: {
    toDown(url) {
      window.open(url);
    },
    toView(url) {
      window.open(url);
    },
    gohighSearch() {
      this.$router.push("/highSearch");
    },
    // 每页大小变更处理函数
    handleSizeChange: function (size) {
      this.pageSize = size;
      console.log("每页大小:" + this.pageSize); //每页下拉显示数据
      this.search();
    },
    // 页码变更处理函数
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log("当前页码:" + this.currentPage); //点击第几页
      this.search();
    },
    search () {
       this.$store.dispatch("getSearchList", this.keyword , this.currentPage , this.pageSize);
    }, 
    // 查询类型变更时，当前页码改为1
    //  typeChange: function () {
    //   this.currentPage = 1;
    // },
  },
};

 

遇到的问题:

分页插件无法控制数据

明天做: 优化搜索过程,优化数据展示, 加标题条超链接 , 优化分页功能