ant design vue树选择器实现部分层级禁用(指定层级或依据字段判断)

1、依据字段判断是否禁用

const handData = (array, level?) => {
    array.forEach((item) => {
      if (level === 0) {
        //获取一级菜单
        item.title = item.levelName;
        item.value = item.code;
        if (item.type == 'LAYER') {
          item.disabled = true;
        } else if (item.type == 'JOB') {
          item.disabled = false;
        }
      }
      if (item.child != null) {
        //获取二级菜单
        item.children = [...item.child];
        item.children.map((res) => {
          res.title = res.levelName;
          res.value = res.code;
          if (res.type == 'LAYER') {
            res.disabled = true;
          } else if (res.type == 'JOB') {
            res.disabled = false;
          }
        });
        handData(item.child); //递归遍历,获取后续菜单如三级菜单
      }
    });
    treeData.value = array;
  };

getPostTree().then((res) => {
      handData(res, 0);
    });

2、依据层级判断是否禁用,(这里做一二级禁用,第三级放开)

const handData3 = (array, level?) => {
    array.forEach((item) => {
      if (level === 0) {
        //获取一级菜单
        item.title = item.levelName;
        item.value = item.code;
      }
      if (item.child != null) {
        //获取二级菜单
        item.children = [...item.child];
        item.children.map((res) => {
          res.title = res.levelName;
          res.value = res.code;
          item.disabled = true;
        });
        handData3(item.child, level + 1); //递归遍历,获取后续菜单如三级菜单
      } else if (item.child == null && level == 1) {
        item.disabled = true;
      }
    });
    treeData3.value = array;
  };

3、效果图

猜你喜欢

转载自blog.csdn.net/m0_62626838/article/details/143244979