vue+elementUI组件tree如何实现单选加条件禁用
更新时间：2022年09月16日 09:00:41 作者：GarenWang
这篇文章主要介绍了vue+elementUI组件tree如何实现单选加条件禁用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue+elementUI组件tree单选加条件禁用
elementUI tree：http://element.eleme.io/#/zh-CN/component/tree
官方给出的API还是挺全的，但是示例木有给全，有几个API的说明也不是很能理解～
tree实现带选择框的要加上node-key="id" show-checkbox两个属性，
<el-tree ref="tree2" :data="data2" :props="defaultProps" class="filter-tree" node-key="id" show-checkbox />
但是要单选呢？！组件默认如果选中了父节点，相应的子节点也会被选中，要切断关联，那就要加check-strictly这个属性，默认是false，props形式传入设置成true即可～
组件还提供了设置勾选的节点的方法setCheckedKeys，参数接收节点的key，已数组的形式传入
this.$refs.tree2.setCheckedKeys([3]);
有个设置的方法，还需要一个触发的事件以及当前选中的节点数据，刚好API有个check事件，啊！疯狂点赞中～
此方法会传递两个参数，node是当前节点的数据，data选中状态的详情数据，使用如下：
<el-tree ref="tree2" :data="data2" :props="defaultProps" node-key="id" show-checkbox :check-strictly="true" @check="checkFn" />
checkFn(node, data) {
console.log(11111, node, data);
let checkedKeys = data.checkedKeys;
let currKey = node.id;
this.$refs.tree2.setCheckedKeys([currKey]);
}使用如上方法就可以完成实现单选
禁用的话，组件提供了props设置disabled，
可以直接以布尔形式设置，也可以函数返回值的形式设置，下面给出两种设置方法的代码～
1. 以布尔形式设置，需要在节点数据里加上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>2. 以函数返回值的形式设置，disabled函数会返回当前节点的数据，return一个状态回去就OK～
<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: [],
defaultProps: {
children: 'children',
label: 'label',
disabled: this.disabledFn,
}
};
},
methods: {
/**
* disabled函数
*/
disabledFn(data, node) {
// console.log("disabled函数: ", data, node);
if (!data.isAggregation) { // 根据自己的节点数据条件设置判断，我只提供了个参考
return true;
} else {
return false;
}
},
}
};
</script>完结！付上一个完成的代码～
<template>
<div class="app-container">
<el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
<el-tree ref="tree2" :data="data2" :props="defaultProps" :filter-node-method="filterNode" class="filter-tree" default-expand-all node-key="id" show-checkbox :check-strictly="true" @check="checkFn" />
</div>
</template>
<script>
export default {
data() {
return {
filterText: "",
data2: [
{
id: 1,
label: "Level one 1",
disabled: true,
children: [
{
id: 4,
label: "Level two 1-1",
children: [
{
id: 9,
label: "Level three 1-1-1"
},
{
id: 10,
label: "Level three 1-1-2"
}
]
}
]
},
{
id: 2,
label: "Level one 2",
children: [
{
id: 5,
label: "Level two 2-1"
},
{
id: 6,
label: "Level two 2-2"
}
]
},
{
id: 3,
label: "Level one 3",
children: [
{
id: 7,
label: "Level two 3-1"
},
{
id: 8,
label: "Level two 3-2"
}
]
}
],
defaultProps: {
children: "children",
label: "label",
}
};
},
watch: {
filterText(val) {
this.$refs.tree2.filter(val);
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
checkFn(node, data) {
console.log(11111, node, data);
let checkedKeys = data.checkedKeys;
let currKey = node.id;
this.$refs.tree2.setCheckedKeys([currKey]);
}
}
};
</script>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇浅谈vue-router路由切换 组件重用挖下的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家详细介绍了vue组件实现发表评论功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
关于element-ui中el-form自定义验证(调用后端接口)
这篇文章主要介绍了关于element-ui中el-form自定义验证(调用后端接口)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要为大家介绍了vue时间组件DatePicker组件的手写实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要为大家详细介绍了Vue实现附件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了vue+xlsx实现表格的导入导出功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
在Vue组件中,data函数用于定义组件的数据,本文主要介绍了Vue组件data函数的具体使用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-02-02
这篇文章主要介绍了vue 实现动态路由的方法，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要介绍了VUE 单页面使用 echart 窗口变化时的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了解决vue无法侦听数组及对象属性的变化问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论