VUE项目实战39商品分类树形表格渲染和分页

Posted 2022-03-15 光仔December

接上篇《38、实现商品分类的树形表格》
上一篇我们完成了商品分类的树形结构效果，本篇我们来实现“排序”和“操作”列的渲染，以及表格的分页效果。

一、渲染“排序”和“操作”列

需要实现的渲染效果如下：

查看商品分类的返回数据结构：

    "data": [
        
            "cat_id": 1,
            "cat_name": "大家电",
            "cat_pid": 0,
            "cat_level": 0,
            "cat_deleted": false,
            "children": [
                
                    "cat_id": 3,
                    "cat_name": "电视",
                    "cat_pid": 1,
                    "cat_level": 1,
                    "cat_deleted": false,
                    "children": [
                        
                            "cat_id": 6,
                            "cat_name": "曲面电视",
                            "cat_pid": 3,
                            "cat_level": 2,
                            "cat_deleted": false
                        ,
                        
                            "cat_id": 7,
                            "cat_name": "海信",
                            "cat_pid": 3,
                            "cat_level": 2,
                            "cat_deleted": false
                        
                    ]
                
            ]
        
    ],
    "meta": 
        "msg": "获取成功",
        "status": 200
    

可以看到其中有一个“cat_level”字段，指的就是商品分类所属的层级，0为一级分类，1为二级分类，2为三级分类。

我们可以在之前定义的树形表格的columns结构中再定义“排序”列的结构：

//为table指定列的定义
columns: [
    
        label: '分类名称',
        prop: 'cat_name'
    ,
    
        label: '是否有效',
        prop: 'cat_deleted',
        //表示将当前列定义为模板列
        type: 'template',
        //表示当前这一列使用模板名称
        template: 'isok'
    ,
    
        label: '排序',
        //表示将当前列定义为模板列
        type: 'template',
        //表示当前这一列使用模板名称
        template: 'order'
    
]

然后在上面的table标签中再次定义一个template模板，并指定其作用域插槽slot为下面定义的“order”，作用域对象为scope，然后根据当前列“cat_level”所属等级，按不同的条件显示不同样式的Tag标签（一级为蓝色，二级为绿色，三级为黄色）：

<!-- 表格区域 --><!-- 树形组件 -->
<tree-table :data="catelist" :columns="columns" 
    :selection-type="false" :expand-type="false" :show-index="true" :border="true">
    <!-- 是否有效 -->
    <template slot="isok" slot-scope="scope">
        <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:green"></i>
        <i class="el-icon-error" v-else style="color:red"></i>
    </template>
    <!-- 排序 -->
    <template slot="order" slot-scope="scope">
        <el-tag size="mini" v-if="scope.row.cat_level=== 0">一级</el-tag>
        <el-tag type="success" size="mini" v-else-if="scope.row.cat_level=== 1">二级</el-tag>
        <el-tag type="warning" size="mini" v-else>三级</el-tag>
    </template>
</tree-table>

效果：

然后我们继续渲染“操作”列。操作列很简单，只有“编辑”和“删除”两个按钮：

我们在columns结构中再定义“操作”列的结构：

    label: '操作',
    //表示将当前列定义为模板列
    type: 'template',
    //表示当前这一列使用模板名称
    template: 'opt'

然后在table标签中定义template模板，作用域插槽slot为下面定义的“opt”，作用域对象为scope：

<!-- 操作列 -->
<template slot="opt" slot-scope="scope">
    <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit_cate(scope.row)">编辑</el-button>
    <el-button type="danger" icon="el-icon-delete" size="mini" @click="delete_cate(scope.row)">删除</el-button>
</template>

编辑和删除的方法在下面方法区定义（先不实现）：

//编辑分类
edit_cate(cate),
//删除分类
delete_cate(cate)

效果：

二、商品分类表格分页效果

首先我们需要在页面中渲染出这样一个页码条：

我们打开Element-UI官方文档的Pagination分页组件说明，找到“完整功能”的源代码：

 

<div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
</div>

其中需要定义的事件：

我们将el-pagination代码复制到表格tree-table的下方，其中的静态数据，全部换为我们之前定义的分页对象queryInfo中的值（total为我们之前定义好的列表总数total），分页数量定为“3,5,10,15”即可：

<!-- 分页区域 -->
<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>

然后在方法区定义handleSizeChange和handleCurrentChange函数：

//监听pageSize改变
handleSizeChange(newSize)
    //将当前页面最大显示数赋值给分页对象的pagesize
    this.queryInfo.pagesize = newSize;
    this.getCatelist();//刷新表
,
//监听当前页面pagenum改变
handleCurrentChange(newPage)
    //将当前所在页赋值给分页对象的pagenum
    this.queryInfo.pagenum = newPage;
    this.getCatelist();//刷新表

打开浏览器看一下分页效果：

可以看到分页效果已经实现。
最后我们观察表格和上下的组件没有一点空隙，比较难看：

我们可以为tree-table新建一个class样式：

<!-- 表格区域 --><!-- 树形组件 -->
<tree-table class="treeTable" :data="catelist" :columns="columns" 
    :selection-type="false" :expand-type="false" :show-index="true" :border="true">
    <!-- 中间代码省略... -->
</tree-table>

然后在Script区域定义表格的上下外边距为15像素：

<style scoped>
.treeTable
    margin-top: 15px;
    margin-bottom: 15px;

</style>

优化后的效果，上下有了边距：

至此，商品“排序”和“操作”列的渲染，以及分页效果已经实现了。
下一篇我们实现添加商品分类的功能。

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频

转载请注明出处：https://blog.csdn.net/u013517797/article/details/123459983