使用element的Tree树形控件,节点选中状态下设置禁用disabled
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
需求:使用ElementUi Tree树形控件,节点选中状态下设置禁用disabled
本案例代码如下:
<template>
<div class="tree3">
<span>设置多选复选框为不可编辑,只要选中就不可编辑</span>
<div style="margin-left: 600px;width:100%">
<el-tree
:data="data3"
ref="tree"
show-checkbox
node-key="id"
:check-on-click-node="checkNodeFlag"
:default-expanded-keys="[2, 3]"
@check-change="handleCheckChageFun"
@check="handleCheckFun"
>
</el-tree>
</div>
<!-- :default-checked-keys="defaultCheckedKeys" -->
</div>
</template>
<script>
export default {
name: "TreeTest3",
data() {
return {
checkNodeFlag:false,
currNodeId:'',//当前选中nodeId
defaultCheckedKeys:[],
data3: [{
id: 1,
label: '一级 2',
disabled:false,
children: [{
id: 3,
label: '二级 2-1',disabled:false
}, {
id: 2,
label: '二级 2-2',
disabled:false
},
{id: 4, label: '2级 4',disabled:false},
{id: 5, label: '2级 5',disabled:false},
{id: 6, label: '2级 6',disabled:false},
{id: 7, label: '2级 7',disabled:false},
{id: 8, label: '2级 8',disabled:false},
{id: 9, label: '2级 9',disabled:false},
{id: 10, label: '2级 10',disabled:false},
{id: 11, label: '2级 11',disabled:false},
{id: 12, label: '2级 12',disabled:false},
{id: 13, label: '2级 13',disabled:false},
{id: 14, label: '2级 14',disabled:false},
{id: 15, label: '2级 15',disabled:false},
{id: 16, label: '2级 16',disabled:false},
{id: 17, label: '2级 17',disabled:false},
{id: 18, label: '2级 18',disabled:false},
]
}],
disableData:this.data3,
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods:{
handleCheckChageFun(currNode){
console.log("hanleCheckChageFun---");
},
handleCheckFun(currNode){
this.currNodeId = currNode.id;
this.defaultCheckedKeys= null
this.dealTreeOnceChecked(this.data3)
},
dealTreeOnceChecked(arrMenus){
arrMenus === undefined ? arrMenus=[]:''
if(arrMenus.length > 0){
//let disarr = [];
arrMenus.forEach(item => {
let arrChildren = item.children
if(arrChildren !== null) this.dealTreeOnceChecked(arrChildren)
item.id === this.currNodeId ? item.disabled = true :'';
})
}
}
}
}
</script>
<style scoped>
</style>
<style lang="stylus" >
</style>
其他说明:
1,ElementUi Tree树形控件 的使用请参考官方网站 ElementUI API
https://element.eleme.cn/2.0/#/zh-CN/component/tree#tree-shu-xing-kong-jian
2,通过disabled 设置Tree的某些节点为禁用状态,通过案例发现,disabled 是在数组中的对象的一个属性,
如案列代码所示:
<el-tree
:data="data3"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]">
</el-tree>
<script>
export default {
data() {
return {
data3: [{
id: 1,
label: '一级 2',
children: [{
id: 3,
label: '二级 2-1',
children: [{
id: 4,
label: '三级 3-1-1'
}, {
id: 5,
label: '三级 3-1-2',
disabled: true
}]
}, {
id: 2,
label: '二级 2-2',
disabled: true,
children: [{
id: 6,
label: '三级 3-2-1'
}, {
id: 7,
label: '三级 3-2-2',
disabled: true
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
3,在选中的时候,将当前节点的disabled修改为true
通过函数迭代的方式,在数组对象中添加disabled变量
说明:arrMenus默认是[ ],不存在是null的情况,所以没有加判断
dealTreeOnceChecked(arrMenus){
if(arrMenus.length > 0){
arrMenus.forEach(item => {
let arrChildren = item.childrenList
if(arrChildren !=null) this.dealTreeOnceChecked(arrChildren)
item.xxx === '选中时的值' ? item.disabled = true : item.disabled = false
})
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)