标签：checked 批评 使用 dir 比较 样式 支持 逻辑 sel
iView中的树组件有复选框可以多选，但是目前还没有提供单选框的模式，不显示复选框可以提供高亮单选的模式，但是再次点击就被取消了，没有实现真正的单选；
tree 的属性配置中 multiple 是否支持多选，是在不显示复选框的时候生效的，不能控制复选框支不支持多选；
实现单选功能中用到了：
:show-checkbox="true" // 是否显示复选框
:check-strictly="true" // 显示复选框的前提下，是否让父子节点不联动
:check-directly="true" // 在显示复选框的前提下，让节点的选中触发复选框的选中
@on-check-change="treeChange" // 复选框被选中的时候触发，可能是点击复选框的时候被选中，也可能是点击节点的时候被选中；返回 当前已勾选节点的数组、当前项
使用 getSelectedNodes() 获取被选中的节点数组，getSelectedNodes()[0] 获得被选中节点的数据
视图、逻辑、样式 如下：
1 <template> 2 <Tree 3 ref="orgTree" 4 :data="orgTree" 5 :show-checkbox="true" 6 :check-strictly="true" 7 :check-directly="true" 8 @on-check-change="treeChange" 9 ></Tree> 10 </template> 11 12 <script> 13 ... 14 methods:{ 15 // 树复选框发生改变--只能有一个被选中 16 treeChange(arr, obj) { 17 // 清空所有已选中的 18 arr.forEach(item => { 19 item.checked = false; 20 }); 21 // 只选中最后一次选中的 22 obj.checked = true; 23 } 24 } 25 </script> 26 27 <style> 28 /* 让方形复选框变成圆形单选框样式，最好在树组件外套一个父盒子，在样式前加父级选择器，以免影响其他树组件*/ 29 .ivu-checkbox-inner { 30 border-radius: 50%; 31 } 32 </style>
写的比较简单，可能还有不完善的地方，还请各位大佬批评指正
标签：checked 批评 使用 dir 比较 样式 支持 逻辑 sel
原文地址：https://www.cnblogs.com/web-xu/p/12085051.html
