0
篇帖子
使用element-ui tree树形控件的时候,在选择一个子节点后,使用getCheckedKeys 后,发现只能返回子节点的ID,但是其父节点ID没有返回。
getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }
但是这种方法在没有全选时无法获取父ID.
methods: {
getCheckedNodes() {
var rad=''
var ridsa = this.$refs.tree.getCheckedKeys().join(',')// 获取当前的选中的数据[数组] -id, 把数组转换成字符串
var ridsb = this.$refs.tree.getCheckedNodes()// 获取当前的选中的数据{对象}
ridsb.forEach(ids=>{//获取选中的所有的父级id
rad+=','+ids.parentId
})
rad=rad.substr(1) // 删除字符串前面的','
var rids=rad+','+ridsa
var arr=rids.split(',')// 把字符串转换成数组
arr=[...new Set(arr)]; // 数组去重
rids=arr.join(',')// 把数组转换成字符串
console.log(rids)
}
}
一定要有父ID:parentId,要先有父ID,才能找出,不过它会找出全部的父ID,包括顶级,可以前端处理,后端也可以。踢掉数组中是0的字符,就可以了。是我在别的博客也看到其他方法,我只选择了一个比较快的方法,其他的我会去好好看看,可以的话我会更新文章,便于大家高效使用。
<template>
<div>
<el-tree
:data="data2"
show-checkbox
default-expand-all
node-key="id"
ref="tree"
highlight-current
:props="defaultProps">
</el-tree>
<div class="buttons">
<el-button @click="getCheckedNodes">获取</el-button>
<el-button @click="resetChecked">清空</el-button>
</div>
</div>
</template>
<script>
export default {
methods: {
getCheckedNodes() {
var rad=''
var ridsa = this.$refs.tree.getCheckedKeys().join(',')// 获取当前的选中的数据[数组] -id, 把数组转换成字符串
var ridsb = this.$refs.tree.getCheckedNodes()// 获取当前的选中的数据{对象}
ridsb.forEach(ids=>{//获取选中的所有的父级id
rad+=','+ids.pid
})
rad=rad.substr(1) // 删除字符串前面的','
var rids=rad+','+ridsa
var arr=rids.split(',')// 把字符串转换成数组
arr=[...new Set(arr)]; // 数组去重
rids=arr.join(',')// 把数组转换成字符串
console.log(rids)
},
resetChecked() {
this.$refs.tree.setCheckedKeys([]);
}
},
data() {
return {
data2: [{
pid:0,
path:xxxx,
id: 1,
label: '一级 1',
children: [{
pid:1,
path:xxxx,
id: 11,
label: '二级 1-1'
},
{
pid:1,
path:xxxx,
id: 12,
label: '二级 1-2'
},
{
pid:1,
path:xxxx,
id: 13,
label: '二级 1-3'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
}
};
</script>
</script>
<style scoped>
</style>
本博客内所有原创和翻译的文章的版权归本人所有,允许第三方转载,但转载时请务必保留作者名,并注明出处链接,否则本人将保留追究其法律责任的权利。
「人生在世,留句话给我吧」