本文共 5725 字，大约阅读时间需要 19 分钟。

$$卡片式分页界面$$

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>