13

Vue3学习（十八） - TreeSelect 树选择 - 久曲健

 1 year ago
source link: https://www.cnblogs.com/longronglang/p/18033185
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

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

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

718867-20240225220149391-98468614.png

解决方案：

将parent改造为对象：

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

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

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

此处略，参考以前

2、TreeSelect 树选择使用

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

javascript
<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、增加对象拷贝及对应选中状态设置

javascript
   /**
     * 将某节点及其子孙节点全部置为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);
        }
      });
    };

718867-20240225220210369-365542907.png

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

__EOF__


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK