View UI Plus （iview）表格单选实现教程

View UI Plus 是 View Design 设计体系中基于 Vue.js 3 的一套 UI 组件库，主要用于企业级中后台系统

View UI，即原先的 iView，从 2019 年 10 月起正式更名为 View UI，并使用全新的 Logo

View UI Plus 实现表格单选，这里需要用到 render 函数，实现的思路是使用render函数自定义表格列为单选框或多选框，然后监听每个单选框或多选框的chang事件，一旦它们中的任意一个发生变化，则将所有的单选框或多选框选中取消，将发生变化的单选框或多选框设置为选中

先直接上代码看效果，再解释里面的关键点

运行效果

上面代码的关键点有3处

1、是要给表格中数据每个对象添加一个字段checked，这个字段是boolean值，true是选中，false是不选中，将它用来绑定每个checkbox的选中状态

2、是model-value，这个是查看View UI Plus官网文档Checkbox的绑定值，官网文档地址：https://www.iviewui.com/view-ui-plus/component/form/checkbox#API

官网截图

3、是onChange事件，在选项状态发生改变时触发，这个亦可在官网文档上查到

 

但是上面代码不算完整，因为它存在一个bug，就是当选中一个Checkbox后，再次选中同一个Checkbox，无法取消这个Checkbox的选中状态。即2次点击同一个Checkbox，应该是先选中再取消，但是上面的代码一直是选中状态，无法取消，因为 this.data[params.index].checked = true，将点击的Checkbox一直设置为选中状态

怎么解决这个问题呢？

我们可以先保存一下当前点击的Checkbox的选中状态，然后将所有Checkbox都设置成不选中，然后判断之前保存的Checkbox的选中状态，如果是true，说明点击前是选中状态，则不做任何处理；如果是false，则说明点击前不是选中状态，将它设置成选中状态

代码如下

运行效果

至此完