标签:控件 checkedId 节点 树形 单选 params element data id
<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>
标签:控件,checkedId,节点,树形,单选,params,element,data,id 来源: https://www.cnblogs.com/maxiag/p/14071804.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。