Vue3学习(十八) – TreeSelect 树选择

  • Vue3学习(十八) – TreeSelect 树选择已关闭评论
  • 78 次浏览
  • A+
所属分类:Web前端
摘要

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


写在前面

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

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

遗留问题

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

Vue3学习(十八)  - TreeSelect 树选择

解决方案:

将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、效果

Vue3学习(十八)  - TreeSelect 树选择

写在最后

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