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"?
这个是因为 再插件源码中,这个有警告
我多方查阅(百度之后),发现可以直接干掉,不会有影响 于是直接给node_modules 打补丁给它干掉
具体打补丁办法