element UI 树形数据只能选择最后一级 只能单选 树形单选树形检索
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
直接上代码,如有疑问,欢迎交流
template里面
<el-tree
class="filter-tree"
:data="treeData"// 树形data数据,具体按照官方文档格式
:props="defaultProps" //自定义props配置,如严格按照官方格式无需添加此项,
@check="checkChange" //checkbox 选项变化事件
node-key="id" //勾选时按照哪个值显示,必须是唯一的值
accordion
check-strictly
highlight-current
show-checkbox
:default-expanded-keys="defaultArr"
:default-checked-keys="defaultArr"
:filter-node-method="filterNode"
ref="tree">
</el-tree>
script
<script>
import ArrayUtils from "../../../../libs/utils/ArrayUtils";//处理只能选择最后一个节点
export default {
name: "tree-dialog",
data() {
return {
filterText: '',//检索字段
defaultProps: {
children: 'children',
label: 'name'
},//过滤使用字段
treeData: [],//资产大类树形结构数据
checkedData: {},//当前点击的数据
}
},
watch:{
/** 监听检索字段变化 */
filterText(val) {
this.$refs.tree.filter(val);
},
},
mounted(){
//获取到treeData后 此处已省略请求数据过程,请自行添加 处理只能选择最后一个节点
ArrayUtils.filterTreeData(this.treeData);
},
methods: {
/** 控制树形单选 */
checkChange(data, checked) {
if (checked) {
if (!!data.children && data.children.length>0) {
console.log("有子节点不可选")
}else{
this.checkedData = data;
// 注意!!!
//1、下方的id和属性中 node-key="id"必须是同一个字段
//2、$refs.tree 也需要和上方的属性匹配 ref="tree"
this.$refs.tree.setCheckedKeys([data.id]);
}
}
console.log("checked data",data,this.checkedData)
},
/** 树形数据检索 */
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
},
}
</script>
处理只能选择最后一个节点 ArrayUtils 中的数据
/** 过滤树形数组,包含children的选项均禁用 */
function filterTreeData(treeData) {
return treeData.filter(item => {
if (isNotEmpty(item.children)) {
item.disabled = true;
item.children = filterTreeData(item.children)
}
return item
})
}
function isNotEmpty(arr) {
return arr && Array.isArray(arr) && arr.length > 0;
}
export default {
filterTreeData
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
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 个月前
更多推荐
已为社区贡献8条内容
所有评论(0)