iview 动态控制 table中某一行select勾选框能否选中，以及某一行select勾选框能否显示(隐藏禁用的勾选框)。

如上图，这是一个vue页面中的table，在其columns中加了一个selection后，实现了多选/全选table行的功能：

{type: 'selection',width: 60,align: 'center'
},

现需要对这个table中select勾选框的勾选和显示进行diy:

1、根据table行中的处理状态值来动态控制该行勾选框能否被勾选中：处理状态值==1，不能勾选，其他值能勾选。

2、隐藏掉table行中的不能勾选的勾选框。

解决：

1、.js文件中给 data 项设置特殊 key _disabled: true 禁止选择当前项。

if(this.data.length>0){  //data是请求后台返回的数据集for (let i = 0; i < this.data.length; i++) {if (this.data[i].clzt ==1 ) {//处理状态 1已处理 则勾选框禁止被勾选(置灰)this.data[i]._disabled = true; //给满足条件的行设置 _disabled 属性}}}

效果：

2、隐藏掉table行中的不能勾选的勾选框。

2.1 按以下方法找到被禁选的勾选框的样式

2.1 在最入口App.vue 的style标签中写入全局样式，样式名就是上面找到的那个：

将其display属性复写为none，并用 !important 将该复写的样式定义为最高优先级，!important 可以理解为最重要的意思，css优先使用被 !important 修饰的样式。

.ivu-checkbox-disabled{display: none !important;
}

效果：

注：这里一定记住若要隐藏某个勾选框，一定要先禁用它，不然被勾选（并不想勾选的数据）都不知道。

iview 动态控制 table中某一行select勾选框能否选中，以及某一行select勾选框能否显示(隐藏禁用的勾选框)。相关推荐

iview在table中添加图片
我们知道iview的table封装的太好,如果只是展示数据简直不要太简单,但是比如合并单元格就很麻烦,而我要做的是在table中添加图片建议大家先看一下这个:https://www.iviewui. ...
在iview的Table中添加Select（render）
首先对Render进行分析,在iview官方的文档中,找到了table插入Button的例子: [javascript] view plaincopy { title: 'Action', key: ...
jQuery在table中追加tr和删除tr
jQuery在table中追加tr和删除tr 1. 追加tr jQuery添加新内容有以下四个方法: (1) append() - 在被选元素的结尾插入内容(效果如下图:) (2) prepend() ...
table中加表单元素每行怎么验证_Validform 一行代码搞定整站的表单验证 - 文章
Validform 一行代码搞定整站的表单验证,为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符 ...
js操作table中tr的顺序，实现上移下移一行的效果
总体思路是在table外部加个div,修改div的innerHtml实现改变tr顺序的效果具体思路是获取当前要移动tr行的rowIndex,在table中删除掉,然后循环table的rows,到了 ...
HTML表格选定区域自动求和,用Jquery选择器计算table中的某一列某一行的合计
利用Jquery选择器,计算table中的某一列,某一行的合计,非常方便.下面以计算行合计为例: 核心算法: $('#tableId tr').each(function() { $(this).fi ...
react antd Table 选中某一行，其它行也被选中了
问题描述: 使用react_antd_design 中的Table组件,渲染的结果如下: 但是现在出现的问题是当我选中其中的一行,其他的行也变成了选中的状态,无法实现选中单行这当然不是我们想要的结果 ...
ajax拿table里的th值,Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...
[JavaScript]利用JavaScript控制table中row的显示
在程序中有时候我们需要根据选择来显示我们需要的信息,通过控制table中row的显示可以实现这样的功能. NoneRow1Row2Row3 Row1 Row2 Row3 JavaScript < ...

iview 动态控制 table中某一行select勾选框能否选中，以及某一行select勾选框能否显示(隐藏禁用的勾选框)。

iview 动态控制 table中某一行select勾选框能否选中，以及某一行select勾选框能否显示(隐藏禁用的勾选框)。相关推荐

最新文章

热门文章