08 分类列表-CSDN博客

本文链接：https://blog.csdn.net/qq_38210427/article/details/129555624

一展示列表

假如遇到了一个需要搭建一个树形结构的表格页面，这时候vue-table-with-tree-grid便可以派上用场

参考：https://blog.csdn.net/qq_38210427/article/details/129595197?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22129595197%22%2C%22source%22%3A%22qq_38210427%22%7D

1.1基本分布

1.2 添加button

1.3 调用接口

{
    "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
    }
}

1.4渲染成树形结构

1 插件说明

依赖于第三方插件

1 点击查看详情，可以看他的说明文档

里边有示例，用法

2 代码编写：

1引入组件

2 编写基础代码

  <tree-table :data="cateList" :columns="columns">

 columns: [{
                label: '分类名称',
                prop: 'cat_name'
            },]

3 隐藏复选框

:selection-type="false"

4 删除展开行

:expand-type="false"

5 添加一个索引列

show-index

index-text="#"

6 列于列之间分割线

7 去掉高亮效果

<!-- 分类表格
:data(设置数据源) :columns(设置表格中列配置信息) :selection-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">
 
</tree-table>

参考：https://blog.csdn.net/m0_57071129/article/details/122853913

二自定义模版列

2.1 是否有效

模版列比较特殊，首先通过type 指定为template ，然后通过template指定具体的插槽，插槽的名字是isok

在哪定义插槽那? 在表格的中间，用template来定义插槽，用slot起名字与右边对应。

通过slot-scope =scope 接收这行数据

然后进行自定义渲染

        <template v-slot:isok="scope">
            <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: lightgreen"></i>
            <i class="el-icon-error" style="color: red" v-else></i>
          </template>

2.2排序

在定义一个插槽

 <!-- 排序 -->
          <template v-slot:order="scope">
            <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
            <el-tag size="mini" type="warning" v-else>三级</el-tag>
          </template>

2.3 操作

 <template v-slot:opt="scope">
            <el-button type="primary" @click="showeditCateDialog(scope.row)" icon="el-icon-edit" size="mini">编辑</el-button>
            <el-button type="danger" @click="removeCate(scope.row.cat_id)" icon="el-icon-delete" size="mini">删除</el-button>
          </template>

2.4 分页

三添加分类

3.1 添加对话框

3.2 添加父级分类

只需要加载前两级分类就可以因为最多有三级分类

2.1 获取分类接口

点击添加分类按钮的时候，调用接口

2.2 渲染父级分类

通过options指定数据源，通过props指定了配置对象

配置对象包括这三个：

value 指定你具体选中了哪个值的属性 : cat_id

label 指定你看到了那个属性 : cat_name

children 指定父子嵌套用的哪个属性 :children

v-model 选中的值，双向绑定到data中，必须是一个数组

代码：


 <el-cascader v-model="selectdKeys" :options="parentCateList" :props="cascaderProps" expand-trigger="hover"></el-cascader>

  // 选中的父级分类的id数组
       selectdKeys: [], // 收集数据后的数组id:[一级分类ID，二级分类id]
        // 指定级联选择器的配置对象
      cascaderProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },

加一个宽度

问题：级联选择器过高，导致错位

可以加个高度。不要在自己的组件中加高度，不生效，要给全局样式加高度

3.3 收集数据

当父级分类发送变化时候，需要执行父级的id ，和等级

1 当你没选择父级分类 selectKeys 数组是空的，则他的pid = 0, level = 0

2 当你选择父级分类,

只选择一级分类，selectKeys 数组里边有一个数据（一级分类id）

当你选择一级分类/二级分类，selectKeys 数组里边有两个个数据(一级分类id,二级分类id)，

3 所以根据数组是否为空，来判断是否选择了分类；

根据数组的最后一个数据，就是你要添加分类的父级id ；同时数组的长度，即是level

   // 选中向发生变化触发
    parentCateChanged() {
      console.log(this.selectdKeys)
      // 如果 selectdKeys 数组中的length大于0证明选中父级分类
      // 反之,就说明没有选中任何父级分类
      if (this.selectdKeys.length > 0) {
        // 父级分类的id
        this.addCateForm.cat_pid = this.selectdKeys[this.selectdKeys.length - 1]
        // 为当前分类的等级赋值
        this.addCateForm.cat_level = this.selectdKeys.length
        return
      } else {
        // 父级分类的id
        this.addCateForm.cat_pid = 0
        // 为当前分类的等级赋值
        this.addCateForm.cat_level = 0
      }
    },