element table根据条件隐藏复选框
在<el-table>标签加 :cell-class-name="cellClass"
在 <el-table-column type="selection">标签加:selectable="selectable" ,如果不加,会出现单元格复选框全部选中,但是表头复选框还是半选状态
<div id="app">
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" :cell-class-name="cellClass">
<el-table-column type="selection" width="55" :selectable="selectable"></el-table-column>>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
</el-table>
</div>
var app = new Vue({
el: '#app',
data: {
tableData: [{
checkStatus: 1,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
checkStatus: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
},
method: {
// 彻底隐藏
cellClass({ row, columnIndex }) {
if (row.checkStatus == 1) {
// 根据某个属性,添加样式,隐藏复选框
return "myCell";
}
},
// 显示,但不可选中
selectable(row, index) {
if (row.checkStatus != 1) {
return true
} else {
return false
}
}
}
})
<style>
.myCell .el-checkbox__input {
display: none !important;
}
</style>
element table根据条件隐藏复选框的更多相关文章
- 转:Ext GridPanel根据条件显示复选框
Ext GridPanel实现复选框选择框: var selectModel = new Ext.grid.CheckboxSelectionModel({ singleSelect : false ...
- element表格切入按钮以及复选框
1,element表格切入按钮 关键代码: html:<el-table :data="tableList" border style="width: 100%&q ...
- 关于MUI v0.18.0版本 Table组件里的复选框不能选的解决方案
前段时间在用MUI的时候,Table组件出现复选框不能选的bug(描述: 点击复选框,点击事件会触发,复选框勾选状态无变化). 解决方法: 用CheckBox组件代替Table组件自带的复选框. 解决 ...
- 复选框input:checkbox
复选框 CreateTime--2017年6月5日14:04:55Author:Marydon 五.复选框 (一)语法 <input type="checkbox" /& ...
- 关于通过jq /js 实现验证单选框 复选框是否都有被选中
今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...
- ListBox复选框拓展
Toolkit的LongListMutiSelector的复选框功能,想必许多人都需要吧!然而系统本身控件ListBox虽然也有多选功能,可是外观上却缺乏复选框,选择效果只是颜色变化.于是在上一个项目 ...
- 使用CSS3制作酷炫防苹果复选框 自行测试!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery怎样获取多个复选框的值?
jquery的遍历方法可以获取复选框所欲的选中值 1 2 $("input:checkbox:checked").each(function(index,element)); ...
- js根据选中的复选框,隐藏那一行
如图,选择复选框,点击“隐藏”按钮,隐藏选中行 1.JavaScript代码: function getCheckedIds() { var checkedSubject = $('#showSbgl ...
- spring mvc:常用标签库(文本框,密码框,文本域,复选框,单选按钮,下拉框隐藏于,上传文件等)
在jsp页面需要引入:<%@taglib uri="http://www.springframework.org/tags/form" prefix="form&q ...
随机推荐
- 新零售标杆 SKG 全面拥抱 Serverless,实现敏捷交付
简介: SKG CTO 王焱:以前需要 60 个人干的活,用 SAE 和大禹后 15 个人就可以! 作者:陈列昂.昕辰.龙琛.黛忻 项目背景 SKG 公司是一家专注于高端健康产品的研发.设计与制造 ...
- 阿里云架构师梁旭:MES on 云盒,助力客户快速构建数字工厂
简介: 四大优势:一站式交付.业务低延时.数据本地驻留.多工厂统一运维 2022年5月18日,在"云上数字工厂与中小企业数字化转型创新论坛"暨"鼎捷MES & 阿 ...
- 兑现 Service Mesh 的新价值:精确控制“爆炸半径”
简介:本文分享了阿里云内部所沉淀的全链路流量打标与路由的能力,做出服务网格技术新体验的同时,很好地兑现了服务网格的新价值. 作者:至简 软件是以持续迭代的方式去不断演进的.某种程度上,我们并不担心软 ...
- 无缝融入 Kubernetes 生态 | 云原生网关支持 Ingress 资源
简介:Kubernetes 一贯的作风是通过定义标准来解决同一类问题,在解决集群对外流量管理的问题也不例外.Kubernetes 对集群入口点进行了进一步的统一抽象,提出了 3 种解决方案:Node ...
- [FE] iframe 相关选项 x-frame-options: 设置 meta 标签无效 & helmet
The X-Frame-Options HTTP 响应头是用来给浏览器 指示允许一个页面 可否在 <frame>, <iframe>, <embed> 或者 < ...
- 非技术 对以后各大应用功能与 AI 助手的思考
本文记录我对于 AI 助手在未来给各大应用或网站或设备带来的影响的思考 结论:未来的各大应用或网站或者是设备,都不会出现满屏的眼花缭乱的功能,取代的是各自有一个专属的 AI 助手,通过 AI 助手与人 ...
- dotnet 世界猜测 随机数的小测试
这是一个半技术向的博客,主题来源于我读过的某本书的片段,这是一个稍稍有些前置知识的故事,主题的大概内容就是假定世界存在某个规则序列,通过一代代的探索,可以获取到此序列的内容.本文将模拟此情形,写一个随 ...
- WinForm 下的高性能笔迹方法
在 WPF 中可以通过 StylusPlugIn 的方式快速从触摸线程拿到触摸数据,而 WinForms 没有这个机制,但是可以通过 Microsoft.Ink 组件和 WPF 相同在 RealTim ...
- Oracle和达梦:查询系统表、系统表字段
1.查询系统表 当前模式下所有的表 可以查询到:表名.表注释 select * from user_tab_comments where TABLE_TYPE = 'TABLE' 2.查询系统表字段 ...
- 视频讲解如何构建surging微服务调用
surging 是一款优秀的微服务引擎,包括了社区版,标准版,异构版,平台版本来解决公司的业务场景需求,如果你是初学者,或者是技术狂热者,社区版完全可以符合你们的要求来学习或者构建起微服务体系的引擎框 ...