卡片式分页界面

$$卡片式分页界面$$

Element-UI卡片

<template>
<div class="">


  <div class="list-group">
    <el-row :gutter="20">
      <el-col :span="6" class="col-group">
        <router-link to="/test">
          <el-card class="card-group"> 
            <img src="https://img1.baidu.com/it/u=2424515499,933640072&fm=26&fmt=auto&gp=0.jpg" class="thumbnail" alt=""  >
            <div class="title">喵喵</div>
          </el-card>
        </router-link>
      </el-col>
    </el-row>
  </div>

</div>
</template>

template

  <div class="list-group">
    <el-row :gutter="20">

      <el-col :span="6" class="col-group" v-for="dataset in datasets" :key="dataset.id">
        <router-link :to="dataset.linkto">
          <el-card class="card-group"> 
            <img :src="dataset.logo" class="thumbnail" alt=""  >
            <div class="title">{{dataset.name}}</div>
          </el-card>
        </router-link>
      </el-col>

    </el-row>
  </div>

js

<script type="text/ecmascript-6">
import {Card,Row,Col} from "element-ui"
export default {
  name: "DataSet",
  data() {
    return {
      datasets:[]
    }
  },
  components:{
    [Card.name]:Card,
    [Row.name]:Row,
    [Col.name]:Col,
  },
  mounted(){
    this.$http.get("/api/datasetslist").then(res =>{
       console.log(res.data.dataset)
       this.datasets = res.data.dataset;
    }).catch(err =>{
       console.log(err)
    })
  }
}
</script>

CSS

.list-group{  
  width: 800px;
  .col-group{
    margin-top: 20px;
    cursor: pointer;
    .card-group{
      height: 180px;
      width: 100%;
      .thumbnail{
        width: 100%;
      }
      .title{
        padding-top: 10px;
      }
    }
    .add-card{
      font: bolder 100px '微软雅黑';
      display: flex;
      text-align: center;
      justify-content: center;
      color: #BBBEC7;
      &:hover{
        box-shadow: 0px 0 1px rgba(0, 0, 0, 0.4);
      }
    }
  }
  .pagination{
    text-align: right;
    padding-top: 20px;
  }
}

示例

<template>
<div class="">
  <div class="list-group">
    <el-row :gutter="20">

      <el-col :span="6" class="col-group">
        <router-link to="/test">
          <el-card class="card-group"> 
            <img src="https://img1.baidu.com/it/u=2424515499,933640072&fm=26&fmt=auto&gp=0.jpg" class="thumbnail" alt=""  >
            <div class="title">喵喵</div>
          </el-card>
        </router-link>
      </el-col>


    </el-row>
  </div>

</div>
</template>

<script type="text/ecmascript-6">
import {Card,Row,Col} from "element-ui"
export default {
  name: "Cv",
  data() {
    return {}
  },
   components:{
    [Card.name]:Card,
    [Row.name]:Row,
    [Col.name]:Col,
  },
}
</script>

<style scoped lang='scss'>


.list-group{  
  width: 800px;
  .col-group{
    margin-top: 20px;
    cursor: pointer;
    .card-group{
      height: 100%;
      width: 100%;
      .thumbnail{
        width: 100%;
        height: 100%;
      }
      .title{
        padding-top: 10px;
      }
    }
    .add-card{
      font: bolder 100px '微软雅黑';
      display: flex;
      text-align: center;
      justify-content: center;
      color: #BBBEC7;
      &:hover{
        box-shadow: 0px 0 1px rgba(0, 0, 0, 0.4);
      }
    }
  }
  .pagination{
    text-align: right;
    padding-top: 20px;
  }
}

</style>

Element-UI分页组件el-pagination

    <el-pagination
      layout="prev, pager, next"
      :total="total_page"
      :page-size="12"
      :current-page="current_page"
      class="pagination"
      @current-change="onCurrentChange">
    </el-pagination>

<template>
<div class="">
  <div class="list-group">
    <el-row :gutter="20">

      <el-col :span="6" class="col-group" v-for="dataset in cv_datasets" :key="dataset.id">
        <router-link :to="dataset.linkto">
          <el-card class="card-group"> 
            <img :src="dataset.logo" class="thumbnail" alt=""  >
            <div class="title">{{dataset.name}}</div>
          </el-card>
        </router-link>
      </el-col>

    </el-row>
    <el-pagination
      layout="prev, pager, next"
      :total="total_page"
      :page-size="12"
      :current-page="current_page"
      class="pagination"
      @current-change="onCurrentChange">
    </el-pagination>
  </div>

</div>
</template>

<script type="text/ecmascript-6">
import {Card,Row,Col,Pagination} from "element-ui"
export default {
  name: "DataSet",
  data() {
    return {
      cv_datasets:[],
      total_page:0,
      current_page:1,
    }
  },
  components:{
    [Card.name]:Card,
    [Row.name]:Row,
    [Col.name]:Col,
    [Pagination.name]:Pagination,
  },


  mounted(){
    this.$http.get('/api/cv_datasetslist').then(res =>{
       console.log(res.data.cv_dataset)
       this.cv_datasets = res.data.cv_dataset;
       this.total_page = 20
    }).catch(err =>{
       console.log(err)
    })
  },


  methods:{
    onCurrentChange(page){
      console.log(page)

    }
  }
}
</script>

<style scoped lang='scss'>
.list-group{  
  width: 800px;
  .col-group{
    margin-top: 20px;
    cursor: pointer;
    .card-group{
      height: 180px;
      width: 100%;
      .thumbnail{
        width: 100%;
      }
      .title{
        padding-top: 10px;
      }
    }
    .add-card{
      font: bolder 100px '微软雅黑';
      display: flex;
      text-align: center;
      justify-content: center;
      color: #BBBEC7;
      &:hover{
        box-shadow: 0px 0 1px rgba(0, 0, 0, 0.4);
      }
    }
  }
  .pagination{
    text-align: right;
    padding-top: 20px;
  }
}

</style>

---

卡片跳转问题

<el-col :span="6" class="col-group" v-for="dataset in cv_datasets" :key="dataset.id">
  <router-link :to="cv/detail?id='+dataset.id">
    <el-card class="card-group"> 
      <img :src="dataset.logo" class="thumbnail" alt=""  >
      <div class="title">{{dataset.name}}</div>
    </el-card>
  </router-link>
</el-col>