<!-- 分页区域 -->
<!-- current-page当前页码数 page-sizes当前每页显示多少条数据 layout 展示菜单项 -->
<!-- @size-change页码值发生改变 :current-page当前的页码值 :page-sizes 总共可选值 :page-size当前显示几条数据-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[3,5,10,15]"
:page-size="queryInfo.pagesize"
layout="total,sizes, prev, pager, next,jumper"
:total="total">
</el-pagination>
handleCurrentChange(val) {//监听页码值改变的事件 val最新的页码值
this.queryInfo.pagenum=val//重新赋值
this.getCateList()//并且重新发送数据请求
},
handleSizeChange(val) { //切换每页显示条触发 拿到最新的
this.queryInfo.pagesize=val
this.getCateList()//并且重新发送数据请求
},
表格美化 按钮距离表格太近 加样式
<tree-table class="treeTable" :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false">
<style lang="less" scoped>
.treeTable{
margin-top: 15px;
}
</style>
效果
<template>
<div>
<!-- 面包屑导航区 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>商品分类</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区域 -->
<el-card class="box-card">
<el-row>
<el-col>
<el-button type="primary">添加分类</el-button>
</el-col>
</el-row>
<!-- 表格区域 tree-table和我们前面注册的自定义名称一样-->
<!-- data数据源cateList columns列配置 election-type除复选框 去除展开行expand-type show-index索引 index-text索引名称 border分割线 show-row-hover高亮效果-->
<tree-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false" class="treeTable">
<!-- 在内容节点定义模板 -->
<!-- 是否有效 -->
<template slot="isok" slot-scope="scope">
<i style="color: lightgreen;" class="el-icon-success" v-if="scope.row.cat_deleted===false"></i>
<i style="color: red;" class="el-icon-error" v-if="scope.row.cat_deleted===true"></i>
</template>
<!-- 是否排序 -->
<template slot="issort" slot-scope="scope">
<el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
<el-tag type="success" size="mini" v-if="scope.row.cat_level===1">二级</el-tag>
<el-tag type="warning" size="mini" v-if="scope.row.cat_level===2">三级</el-tag>
</template>
<!-- 是否操作 -->
<template slot="isopt" slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini">编辑</el-button>
</template>
</tree-table>
<!-- 分页区域 -->
<!-- current-page当前页码数 page-sizes当前每页显示多少条数据 layout 展示菜单项 -->
<!-- @size-change页码值发生改变 :current-page当前的页码值 :page-sizes 总共可选值 :page-size当前显示几条数据-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[3,5,10,15]"
:page-size="queryInfo.pagesize"
layout="total,sizes, prev, pager, next,jumper"
:total="total">
</el-pagination>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
cateList: [],//商品分类的数据列表 默认为空
queryInfo: {//查询条件
type: 3,//3级分类
pagenum: 1,//当前页码值
pagesize: 5//每页显示5条数据
},
total: 0,//总数据条数
columns: [//表格各列的配置
{//列定义
label: '分类名称',//列标题名称
prop: 'cat_name',//对应列内容的属性名
width: '400px',
},
{
label: '是否有效',//列标题名称
width: '400px',
type:'template',//表示将当前列渲染成为模板列
template:'isok',//表示当前使用这一类使用的模板名称-再表格内容节点中使用
},
{
label: '排序',//列标题名称
width: '400px',
type:'template',//表示将当前列渲染成为模板列
template:'issort',//表示当前使用这一类使用的模板名称-再表格内容节点中使用
},
{
label: '操作',//列标题名称
width: '400px',
type:'template',//表示将当前列渲染成为模板列
template:'isopt',//表示当前使用这一类使用的模板名称-再表格内容节点中使用
},
],
}
},
created() {//一开始进行获取数据
this.getCateList()//获取商品信息
},
methods: {
async getCateList() {//获取商品分类数据-涉及分页 查询条件
const { data: res } = await this.$http.get('categories', { params: this.queryInfo })
if (res.meta.status !== 200) return this.$message.error('获取商品分类数据失败')
//console.log(res.data) 测试
this.cateList = res.data.result//将商品分类数据赋值给cateList
this.total = res.data.total//为总数据条数赋值
},
handleCurrentChange(val) {//监听页码值改变的事件 val最新的页码值
this.queryInfo.pagenum=val//重新赋值
this.getCateList()//并且重新发送数据请求
},
handleSizeChange(val) { //切换每页显示条触发 拿到最新的
this.queryInfo.pagesize=val
this.getCateList()//并且重新发送数据请求
},
},
}
</script>
<style lang="less" scoped>
.treeTable{
margin-top: 15px;
}
</style>