<template>
<div id="">
<el-tree
id="radio"
ref="treeForm"
:data="treeInfo"
:props="defaultProps"
node-key="id"
show-checkbox
check-strictly
@check-change="handleNodeClick1"
/>
</div>
</template>
<script>
export default {
name: 'TreeRadio',
props: ['toChildrenData'],
// 要展示的信息
data() {
return {
checkedId: '', // 当前点击的节点ID
treeInfo: [], // 获取到的树形结构
defaultProps: { // 树形结构的校验规则
children: 'childOrgList',
label: 'name'
},
params: {
organExist: '', // 判断机关是否存在 1是存在 0是不存在
miniUnit: '' // 选择人员层数
}
}
},
created() {
this.getInfo()
},
// 添加事件的地方
methods: {
async getInfo() {
this.params = this.toChildrenData
await selectInfo(this.params).then(data => {
this.treeInfo = data.data
// eslint-disable-next-line handle-callback-err
}).catch((err) => { return false })
},
// @check-change 节点选中状态发生变化时的回调
// 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
handleNodeClick1(data, checked, node) {
if (checked === true) {
this.checkedId = data.id
this.$refs.treeForm.setCheckedKeys([data.id])
} else {
if (this.checkedId === data.id) {
this.$refs.treeForm.setCheckedKeys([data.id])
}
}
}
}
}
</script>
<style>
#radio .el-checkbox__inner {
border-radius: 50%;
}
</style>