插件@riophae/vue-treeselect的禁用父节点,只能点击子节点

279 阅读1分钟

vue-treeselect父节点禁止点选,只能点击子节点

1.使用了插件 @riophae/vue-treeselect

2.进行数据转化 isDisabled:node.children?.length>0 ? true : false,

   /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.menuTitle,
        children: node.children,
        isDisabled:node.children?.length>0 ? true : false,
      };
    },

3.要实现这个 父节点禁止点选,只能点击子节点 效果 必须要加属性 :flat="true"

<el-col :span="12">
            <el-form-item label="归属菜单" prop="menuId">
              <treeselect v-model="form.menuId" :options="deptOptions" :normalizer="normalizer" :show-count="true" :flat="true"  
                placeholder="请选择归属菜单" />
            </el-form-item>
          </el-col>
          
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    
     /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.menuTitle,
        children: node.children,
        isDisabled:node.children?.length>0 ? true : false,
      };
    },

数据格式 deptOptions

[
    {
        "id": 1,
        "menuTitle": "菜单栏标题",
        "sortNo": 0,
        "availabilityFlag": 1,
        "children": [
            {
                "id": 21,
                "pid": 1,
                "menuTitle": "2222",
                "sortNo": 0,
                "availabilityFlag": 1,
                "cascade": false
            },
            {
                "id": 22,
                "pid": 1,
                "menuTitle": "333",
                "sortNo": 100,
                "availabilityFlag": 1,
                "cascade": false
            }
        ],
        "cascade": false
    },
    {
        "id": 23,
        "menuTitle": "菜单模块2",
        "sortNo": 100,
        "availabilityFlag": 1,
        "children": [
            {
                "id": 25,
                "pid": 23,
                "menuTitle": "222",
                "sortNo": 0,
                "availabilityFlag": 1,
                "cascade": false
            }
        ],
        "cascade": false
    },
    {
        "id": 26,
        "menuTitle": "9999",
        "sortNo": 150,
        "availabilityFlag": 1,
        "cascade": false
    },
    {
        "id": 24,
        "menuTitle": "111",
        "sortNo": 200,
        "availabilityFlag": 1,
        "cascade": false
    },
    {
        "id": 27,
        "menuTitle": "系统管理",
        "sortNo": 300,
        "availabilityFlag": 1,
        "children": [
            {
                "id": 28,
                "pid": 27,
                "menuTitle": "组织机构管理",
                "sortNo": 0,
                "availabilityFlag": 1,
                "cascade": false
            },
            {
                "id": 29,
                "pid": 27,
                "menuTitle": "菜单管理",
                "sortNo": 100,
                "availabilityFlag": 1,
                "cascade": false
            },
            {
                "id": 30,
                "pid": 27,
                "menuTitle": "组件管理",
                "sortNo": 200,
                "availabilityFlag": 1,
                "cascade": false
            }
        ],
        "cascade": false
    }
]

以上写完会发现页面会报错 !!!

vue-treeselect.cjs.js:259 \[Vue-Treeselect Warning] You are using flat mode. But you forgot to add "multiple=true"?

这个是因为 再插件源码中,这个有警告

image.png

我多方查阅(百度之后),发现可以直接干掉,不会有影响 于是直接给node_modules 打补丁给它干掉

具体打补丁办法

如何给node_modules打补丁

就没有报错了

image.png