Vue3学习（十八） – TreeSelect 树选择

写在前面

本以为可以在家学习一天，结果家里来了客人拜年，就没学习上，有点小遗憾吧。

昨天完成从分类管理的前后端代码复制出文档管理的前后端代码，遗留问题是只能选择一级父分类。值得说的是，昨晚的遗留的问题修复了，开心。

遗留问题

点击父文档，弹出警告，从报错来看那意思就是parent应该是一个对象，我却给他一个string字符串。

解决方案：

将parent改造为对象：

node.parent = {'id': node.parent}

使用树形选择组件选择父节点

1、从分类管理的前后端代码复制出文档管理的前后端代码

此处略，参考以前

2、TreeSelect 树选择使用

其实就是将原来一级分类，改为可以多级分类选择，这里我们就用TreeSelect选择来实现，示例代码如下：

const treeS服务器托管网electData = ref();
treeSelectData.value = [];          

3、增加对象拷贝及对应选中状态设置

   /**
     * 将某节点及其子孙节点全部置为disabled
     */
    const setDisable = (treeSelectData: any, id: any) => {
      // 遍历数组，即遍历某一层节点
      for (let i = 0; i  {
      open.value = true;
      docs_data.value = Tool.copy(record);
      // 不能选择当前节点及其所有子孙节点，作为父节点，会使树断开
      treeSelectData.value = Tool.copy(level1.value);
      setDisable(treeSelectData.value, record.id);
      // 为选择树添加一个"无"
      treeSelectData.value.unshift({id: 0, name: '无'});
    };

   /**
     * 新增
     */
    const add = () => {
      open.value = true;
      docs_data.value = {};
      treeSelectData.value = Tool.copy(level1.value);
      // 为选择树添加一个"无"
      treeSelectData.value.unshift({id: 0, name: '无'});
    };

    const level1 = ref(); // 一级文档树，children属性就是二级文档

    /**
     * 数据查询
     **/
    const handleQuery = () => {
      loading.value = true;
      // 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，则列表显示的还是编辑前的数据
      docs.value = [];
      axios.get("/doc/all", {}).then((response) => {
        loading.value = false;
        const data = response.data;
        if (data.success) {
          docs.value = data.content;
          level1.value = [];
          level1.value = Tool.array2Tree(docs.value, 0);
        } else {
          message.error(data.message);
        }
      });
    };  

4、效果

写在最后

前端部分代码，尤其对象拷贝部分，真的需要一定代码功底，我会继续努力的，相信很快我也能写出这样的代码。

服务器托管，北京服务器托管，服务器租用 http://服务器托管网www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: 重写SpringCloudGateway路由查找算法，性能提升100倍！

如果你也在做SpringCloudGateway网关开发，希望这篇文章能给你带来一些启发 背景 先说背景，某油项目，通过SpringCloudGateway配置了1.6万个路由规则，实际接口调用过程中，会偶现部分接口从发起请求到业务应用处理间隔了大概5秒的时间…