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事件，一旦它们中的任意一个发生变化，则将所有的单选框或多选框选中取消，将发生变化的单选框或多选框设置为选中

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

<template><Table border :columns="columns" :data="data"></Table>
</template>
<script>import { resolveComponent } from 'vue';export default {data () {return {columns: [{title: '#',key: 'checked',width: 100,align: 'center',render: (h, params) => {return h(resolveComponent('Checkbox'), {'model-value': params.row.checked,onChange: () => {this.data.forEach(item=>{item.checked = false})this.data[params.index].checked = true}})}        },{title: 'Name',key: 'name',},{title: 'Age',key: 'age'},{title: 'Address',key: 'address'}],data: [{checked: false,name: 'John Brown',age: 18,address: 'New York No. 1 Lake Park'},{checked: false,name: 'Jim Green',age: 24,address: 'London No. 1 Lake Park'},{checked: false,name: 'Joe Black',age: 30,address: 'Sydney No. 1 Lake Park'},{checked: false,name: 'Jon Snow',age: 26,address: 'Ottawa No. 2 Lake Park'}]}},methods: {}}
</script>

运行效果

上面代码的关键点有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，则说明点击前不是选中状态，将它设置成选中状态

代码如下

<template><Table border :columns="columns" :data="data"></Table>
</template>
<script>import { resolveComponent } from 'vue';export default {data () {return {columns: [{title: '#',key: 'checked',width: 100,align: 'center',render: (h, params) => {return h(resolveComponent('Checkbox'), {'model-value': params.row.checked,onChange: () => {//临时保存之前的选中状态  let tmpChecked = this.data[params.index].checkedthis.data.forEach(item=>{item.checked = false})if(!tmpChecked) {//如果之前不是选中状态，则设置为选中this.data[params.index].checked = true}}})}        },{title: 'Name',key: 'name',},{title: 'Age',key: 'age'},{title: 'Address',key: 'address'}],data: [{checked: false,name: 'John Brown',age: 18,address: 'New York No. 1 Lake Park'},{checked: false,name: 'Jim Green',age: 24,address: 'London No. 1 Lake Park'},{checked: false,name: 'Joe Black',age: 30,address: 'Sydney No. 1 Lake Park'},{checked: false,name: 'Jon Snow',age: 26,address: 'Ottawa No. 2 Lake Park'}]}},methods: {}}
</script>

运行效果

至此完

View UI Plus （iview）表格单选实现教程相关推荐

View UI （iview）表格合并单元格（行/列合并）
有时我们在开发过程中会遇到表格里有合并单元格的需求. 今天以View UI (iview)组件库为例. 1. 打开iview官网-table会发现有合并单元格示例: 2. 但是在实际项目中,无法做到像 ...
View UI （iview）动态表单使用教程
View UI,即原先的 iView,从 2019 年 10 月起正式更名为 View UI,并使用全新的 Logo 本文介绍 View UI (iview)动态表单的使用.在项目开发中,有些数据的数 ...
iview/view UI 表格+表单提交必填验证简单方案
在项目中,经常遇到表单嵌入表格的情况,因此必填验证的需求就比较麻烦了,记录下解决方案,先来上一张效果图: 先简单说下实现原理,这个是view UI form-item的源码: 重点就是框住的地方,g ...
View Design 全系产品升级至 Vue 3，并发布 View UI Plus 正式版
品牌升级我们可能是最后一个升级到 Vue.js 3 的组件库,不过该来的早晚会来. 作为国内最早一批的 Vue.js 组件库,View UI(即 iView)来到了它的第 6 年.这 6 年中,我们 ...
使用 SQL Server 2012 Analysis Services Tabular Mode 表格建模图文教程
原文 http://www.cnblogs.com/biwork/archive/2013/05/22/3093896.html BI Work 使用 SQL Server 2012 Analysis ...
View UI——页面右上角添加浮动按钮（设置、退出全屏、进入全屏）
tabindex 用法说明实现以下功能:(用的是View UI组件库) 先创建一个存放浮动按钮的<div> <div class="right_top" v-i ...
Vue组件库 View UI 来看看这80种奇奇怪怪的按钮
80种奇奇怪怪的按钮,先睹为快! 本文详细讲解 View UI 中,Button 组件的样式配置和单击事件响应. 目录一.按钮样式 1.1 颜色 1.2 大小 1.3 按钮形状 1.4 背景透明 1 ...
修改源码实现小程序UI库iview weapp的modal组件自定义宽高
记一下小程序端UI库iview weapp的modal模态窗自定义样式修改因为项目需要在模态窗中显示内容,小程序端的iview没有类似popup这种的弹出框,所以就选择了modal对话框来承载弹出内 ...
React Table 表格组件使用教程排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程 react-table 安装和使用 React Table 表格排序功能 React Table 表格搜索过滤筛选功能 React Table 表格分页功能 ...

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

View UI Plus （iview）表格单选实现教程相关推荐

最新文章

热门文章