<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>