寻找写代码感觉（十九）之分类表格显示优化之树形表格展示

写在前面

这一晃，又两周过去了，没有任何学习及产出，家里亲人离世，加上自己的胡思乱想，加重了自己的精神负担，到现在还是没太缓过来，找不到状态。

我本就是个爱胡思乱想的人，而且还轴得很，今年已经33了，突然感觉好可怕。。。。。。

自己单身干着急，就在那一个劲合计，为什么自己咋就这么费劲，处一个黄一个，平均1-2月，真的很崩溃，感觉自己爱无能，WC.....

现在也真的是豁出去这张老脸了，初中、高中、大学同学，各种让帮忙给我介绍对象，想结婚的心情，真的好强烈，当然，也真的是，人只有经历了一些事情，才会成长，才知道这些事情的重要性。

如何实现属性表格显示

之前尝试了十分钟完成增删改查功能，结果我low了点用了12分钟，就是在基础上复制再改及调试。

基于前面基础，需要对前后端分别调整。

1、后端调整

去掉分页查询，添加按照sort排序，示例代码如下：
service层代码

 public List<CategoryResp> all() {        CategoryExample categoryExample = new CategoryExample();        categoryExample.setOrderByClause("sort desc");        //控制请求后，每页显显示3条数据        List<Category> categoryList = categoryMapper.selectByExample(categoryExample);        //列表复制        List<CategoryResp> respList = copyList(categoryList, CategoryResp.class);        return respList;    }

controller层代码

/**     *      *     * @return     */    @GetMapping("/all")    public CommonResp all() {        CommonResp<List<CategoryResp>> resp = new CommonResp<>();        List<CategoryResp> list = categoryService.all();        resp.setMessage("执行查询成功！");        resp.setContent(list);        return resp;    }

2、前端调整

需要修改调用方法为无参，增加树形效果显示，去掉分页显示，示例代码如下：

 const level1 = ref(); // 一级分类树，children属性就是二级分类    level1.value = [];    /**     * 数据查询     **/    const handleQuery = () => {      loading.value = true;      // 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，则列表显示的还是编辑前的数据      categorys.value = [];      axios.get("/category/all").then((response) => {        loading.value = false;        const data = response.data;        if (data.success) {          const data = response.data;          categorys.value = data.content;          console.log("原始数组：", categorys.value);          level1.value = [];          level1.value = Tool.array2Tree(categorys.value, 0);          console.log("树形结构：", level1);        } else {          message.error(data.message);        }      });    };

知识点总结

1、vue，给属性绑定值时，加冒号和不加冒号的区别
不加冒号的话，属性值全部是字符串
加冒号的话，可以使用字符串、数字、布尔值，以及响应式变量

2、递归算法的套路：
自己调用自己，直到某个条件不再调用自己

/** * 递归算法套路 * 在if里调用自己，或者在else里调用自己都可以 * 下面是以在if里调用自己为例 */public static func () {  if (...) {    // 触发条件时，自己调用自己    func()  } else {    // 不再调用自己  }  return ;}

3、使用递归方法将数组转为树形结构

/** * 使用递归将数组转为树形结构 * 父ID属性为parent */public static array2Tree (array: any, parentId: number) {  if (Tool.isEmpty(array)) {    return [];  }  const result = [];  for (let i = 0; i < array.length; i++) {    const c = array[i];    // console.log(Number(c.parent), Number(parentId));    if (Number(c.parent) === Number(parentId)) {      result.push(c);      // 递归查看当前节点对应的子节点      const children = Tool.array2Tree(array, c.id);      if (Tool.isNotEmpty(children)) {        c.children = children;      }    }  }  return result;}

写在最后

有时候成年人的崩溃，可能就因为一句话，但谨记不管发生什么事，都不要输了心情，演好一个情绪稳定的成年人！