卡 片 式 分 页 界 面 卡片式分页界面 卡片式分页界面
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>