版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
表格,为表格绑定数据
:data='categories.list’
<!-- 表格 -->
//绑定动态数据:data='categories.list'
<el-table :data='categories.list' class="table">
<el-table-column type="selection" align="ceter"></el-table-column>
<el-table-column prop='name' label='栏目名' align="center"></el-table-column>
<el-table-column prop='num' label='数量' align="center"></el-table-column>
<el-table-column label='图标' align="center">
//定义插槽,显示照片
<template #default='record'>
<img :src="record.row.icon" alt="照片">
</template>
</el-table-column>
<el-table-column label='操作' align="center">
<template v-slot:default='scope'>
<a href="" @click.prevent='deleteHandler(scope.row.id)' class="del">删除</a>
<a href="" @click.prevent='updateHandler(scope.row)'>修改</a>
</template>
</el-table-column>
</el-table>
分页组件
总页数。设置total或page-count,将显示页面。如果需要page-sizes,total是必需的
:total=“categories.total” 动态值
sizes,prev,pager,next 分页的布局,元素之间用逗号分隔
尺寸变化 pageSize改变时会触发
<!-- 分页 -->
<el-pagination
@current-change='pageChangeHandler' //定义pageChangeHandler函数
layout="prev, pager, next"
:page-size="param.pageSize"
:total="categories.total">
</el-pagination>
<!-- 分页结束 -->
data(){
return{
name:'分类管理',
categories:{
list:[]
},
centerDialogVisible: false ,
form:{},
sels:[],
param:{
name:'',
page:0,
pageSize:5
}
}
},
created(){
this.loadCategories();
},
methods:{
pageChangeHandler(page){
this.param.page=page-1;
this.loadCategories();
},
async loadCategories(){
let response=await axios.post('/category/query',this.param); //调用后台接口
this.categories=response.data.data;
}
}