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

写在前面

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

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

遗留问题

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

解决方案：

将parent改造为对象：

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

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

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

此处略，参考以前

2、TreeSelect 树选择使用

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

<a-tree-select
  v-model="docs_data"
  show-search
  style="width: 100%"
  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  placeholder="请选择父文档"
  tree-default-expand-all
  :tree-data="treeSelectData"
  :fieldNames="{label: 'name', key: 'id', value: 'id'}"
  >
</a-tree-select>

const treeSelectData = ref();
treeSelectData.value = [];          

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

   /**
     * 将某节点及其子孙节点全部置为disabled
     */
    const setDisable = (treeSelectData: any, id: any) => {
      // 遍历数组，即遍历某一层节点
      for (let i = 0; i < treeSelectData.length; i++) {
        const node = treeSelectData[i];
        node.parent = {'id': node.parent}
        if (node.id === id) {
        // 将目标节点设置为disabled
        node.disabled = true;
        // 遍历所有子节点，将所有子节点全部都加上disabled
        const children = node.children;
        if (Tool.isNotEmpty(children)) {
          for (let j = 0; j < children.length; j++) {
            setDisable(children, children[j].id)
          }
        }
      } else {
        // 如果当前节点不是目标节点，则到其子节点再找找看。
        const children = node.children;
        if (Tool.isNotEmpty(children)) {
          setDisable(children, id);
        }
      }
    }
  };


   /**
     * 编辑
     */
    const edit = (record: any) => {
      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、效果

写在最后

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