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 ...
随机推荐
- 怀里橘猫柴犬,掌上代码江湖——对话阿里云 MVP郭旭东
简介: 跟郭旭东聊过之后,我对程序员的敬佩又多一分.这个92年的开发者,难能可贵地兼备朝气蓬勃的技术能量与长远深刻的行业洞见.独自承担DevOps平台从0到1的所有工作,我打趣说超级开发者不过如此,他 ...
- [FAQ][Hardhat] Error HH501: Couldn't download compiler version 0.8.0. Please check your connection.
当使用 npx hardhat compile 命令编译智能合约时,会先下载你在 hardhat.config.js 配置中对应版本的 solidity 编译器. 当网络不可达时,就会提示无法下载的错 ...
- WPF 通过 Windows Template Studio 快速搭建项目框架和上手项目
本文对新手友好.在咱开始一个新项目的时候,可以利用 Windows Template Studio 快速搭建整个项目的框架.搭建出来的框架比较现代化,适合想要快速开发一个项目的大佬使用,也适合小白入门 ...
- clickhouse数据操常见执行语句
1.清空本地表数据 truncate table 数据库名.表名 :) select * from test_local; SELECT * FROM test_local Query id: ab1 ...
- SpringMVC学习二(日期参数/数据保存/重定向)
接受的参数为日期类型 controller进行数据保存 Controller如何进行重定向跳转 1.对于前端页面传来日期类型的数据时如何进行处理,有两种方法 1.1在对应的Controller中插入代 ...
- linux-centos7.6-gpt-uefi安装
目录 linux-centos7.6-gpt-uefi安装 一.需要 二.环境 三.vm新建虚拟机系统环境 四.开始安装 linux-centos7.6-gpt-uefi安装 一.需要 安装的系统适用 ...
- keepalived(1)- keepalived集群概述
目录 1. 高可用集群概述 2. keepalived概述 2.1 keepalived介绍 2.2 keepalived体系架构 2.3 keepalived实现原理 2.4 keepalived配 ...
- flask注册功能
一个项目的简单结构划分 首先创建一个新项目 可以正常运行与访问 创建配置文件并添加配置. 将这里拆分到不同的文件中,让启动文件更加简洁. 创建一个apps包,导入配置模块,导入Flask,定义创建ap ...
- yum install --downloadonly
yum install --downloadonly --downloaddir=[directory] [package] https://www.cnblogs.com/wangbaobao/p/ ...
- 鸿蒙HarmonyOS实战-Stage模型(卡片数据交互)
一.卡片数据交互 HarmonyOS卡片数据交互是指在基于鸿蒙操作系统的设备上,卡片界面之间进行数据的传输和交互. HarmonyOS的卡片是一种轻量级的应用界面,可以在设备的屏幕上显示信息和提供操作 ...