饿了么UI elementUI中的el-table勾选框设置默认勾选、禁用
最近项目中有这个一个需求:请求后端列表数据,根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态,
如果remark=“1”,是勾选状态且该勾选框变为禁用状态;反之,如果remark !=“1”,则不是勾选状态且用户可以进行勾选
当用户手动进行勾选某行数据时,该操作将向后端发送请求,请求成功则该行数据所对应的的勾选框状态为勾选且禁用
难点及坑:axios请求后端数据成功时,初始化表格的时候,使用el-table的toggleRowSelection()方法设置勾选框状态一直设置失败
解决如下
<el-table ref="table":data="tableData"stripeborder@select="selectSingle" <!--单独勾选某行数据的勾选框-->@select-all="selectAll" <!--勾选头部勾选框,进行全选或者全不选-->><el-table-columntype="selection"fixedwidth="50"align="center":selectable="selectable" <!--设置禁用或非禁用状态-->><el-table-columnv-for="(item,index) in tableHeader":key="index":width="item.width":label="item.label"alignshow-overflow-tooltip><template slot-scope="scope"><template v-if="item.label==="盘符"><span>{{scope.row.name}}</span></template><template v-if="item.label === '硬盘总容量'"><span>{{ scope.row.romTotal }}GB</span></template><template></el-table-column></el-table>
export default {name:'app',data(){return {tableData:[],// 表格数据tableHeader:[ //表格头部{label: '盘符',width: '150',},{label: '硬盘总容量',width: '150',}],}},methods:{//一、获取列表数据storageList(){serviceApi.storageList({}).then(res => {if(res.data.successFlg && res.data.data){//1、获取列表数据,存入tableDatathis.tableData = res.data.data ? res.data.data : [];//2、筛选出remark为“1”的数据,该数据勾选状态需要设置为勾选且禁用if(this.tableData.length > 0){let checkedData = this.tableData.filter((item) => {return item.remark === '1';});let $this = this;//3、一定要使用this.$nextTick(),等数据都渲染到表格中再设置勾选状态,否则直接使用$this.$refs.table.toggleRowSelection(item);没有效果this.$nextTick(() => {if(checkedData.length > 0){checkedData.forEach((item) => {//toggleRowSelection(row, selected)方法接受两个参数,row传递被勾选行的数据,selected设置是否选中$this.$refs.table.toggleRowSelection(item,true);});}});}}}).catch(err => {console.error(err);});},//二、单独勾选表格中某条数据所对应的勾选框selectSingle(selection,row){let data = {remark:'1',id:row.id};serviceApi.saveMediaStorageSpace(data).then(res => {if(res.data.successFlg && res.data.data){this.$message.success('成功');this.storageList();//列表数据刷新}else{this.$message.error('失败');}}).catch(err => {console.error(err);});},//三、勾选头部的勾选框,进行全选selectAll(selection){if(selection.length > 0){//length>0表示全选,length=0为全不选selection.forEach((item) => {let data = {remark:1,id:item.id};serviceApi.saveMediaStorageSpace(data).then(res => {if(res.data.successFlg && res.data.data){this.$message.success('成功');this.storageList();//列表数据刷新}else{this.$message.error('失败');}}).catch(err => {console.error(err);});});}},//四、设置表格中勾选框是否是禁用状态selectable(row,index){if(row.remark === '1'){return false;//禁用状态}else{return true;//非禁用状态}},}}
export default {name:'app',data(){return {tableData:[{name:'c',romTotal:22},{name:'d',romTotal:11},{name:'f',romTotal:33} ],// 表格数据tableHeader:[ //表格头部{label: '盘符',width: '150',},{label: '硬盘总容量',width: '150',}],}},mounted(){this.$refs.table.toggleRowSelection(tableData[0],true);}
}
饿了么UI elementUI中的el-table勾选框设置默认勾选、禁用相关推荐
- elementUI中的el-table勾选框设置默认勾选、禁用
elementUI中的el-table勾选框设置默认勾选.禁用 最近项目中有这个一个需求:请求后端列表数据,根据数据中remark值自动设置table的勾选框的勾选状态及禁用状态, 如果remark= ...
- 去除element-ui中el-drawer标题自带黑色框
背景 在使用Element-UI中的 <el-drawer 组件时,出现了默认选中标题的问题,如下截图 解决办法: 如果使用了scss预处理器,那么可以通过 ::v-deep 来修改样式,如下代 ...
- web前端-Vue element UI中的el-table勾选框 展示隐藏;设置默认勾选、禁用
1.el-table如果我们想新增一个勾选框,在 .vue文件中 <el-table-column type="selection" width="55" ...
- elementUI多选框组件:多选数组,取值问题
elementUI多选框组件:多选数组,取值问题 效果图: <templete>部分: <!-- 我的推荐人才的简历列表 --> <!-- 已发布职位list列表 --& ...
- 使复选框选中_勾选复选框单元格变色,自动计数,在Excel中是如何实现的?
Excel中,我们经常会使用复选框来打勾打叉,这是复选框最基本的功能,相信很多小伙伴都会,但今天我跟大家分享的是复选框的其他操作技巧,勾选复选框变色,统计人数. 下图中,我们要利用复选框是否打钩来确定 ...
- Winform中给DataGridView添加多选框列并获取选中行的内容
场景 使用NPOI导入Excel并赋值给DataTable,然后显示在DataGrdView上,并且添加多选框,然后获取选中行的内容. Winform中使用NPOI实现Excel导入并赋值给DataT ...
- element-ui主表格多选后 二级弹框表格默认全选数据
需求:element ui的主数据列表多选后,点击按钮进入二级弹框后,让二级弹框的所有数据默认全选 二级弹框结构: 网上试了好多方法都未生效,只有用watch监听的方法才行. 注意:这里必须放在thi ...
- 饿了么ui elementui 浏览器日志报错的检查思路
vue.esm.js?efeb:591 [Vue warn]: Invalid prop: type check failed for prop "router". Expecte ...
- elementui中el-table表格根据不同的值设置单元格背景色
elementui中 el-table根据不同的值设置单元格背景色 //1.需要在表头设置cell-class-name //单元格的 className 的回调方法,也可以使用字符串为所有单元格设置 ...
最新文章
- 创业公司CEO每天应该做的13件事
- python:dist-packages site-packages
- mq日志怎么看_RocketMQ的消息是怎么丢失的
- leetcode 563. 二叉树的坡度(Java版)
- 使用Arquillian,Docker和Selenium使Web UI测试再次变得出色(第1部分)
- 【软件工程】设计原则与设计模式
- python-字典-定义-增删改取
- 性能指标、响应时间、并发量…聊聊性能优化的衡量指标
- OSChina 周六乱弹 ——用大脑直接写代码
- 字符串常量与字符数组的区别和字符串常量易错点
- Milne格式MATLAB,matlab考试题
- 手机麦克风声音太大_让手机麦克风声音变大的软件
- 移除PDF文件打开密码
- 使用android studio设置签名信息
- 2021年PAT乙级春季真题
- php过气了吗,她怎么就过气了?
- linux交互式进程初始化失败怎么办,电脑进入安全方式仍然显示交互式登录进程初始化失败...
- 15个Android流行框架
- 随时随地和个性化——移动互联网
- 激光测距项目整体框图及原理
热门文章
- R语言ARMA-EGARCH模型、集成预测算法对SPX实际波动率进行预测
- echarts 折柱图混合,使用数据集dataset,并且改变tooltip中圆点的样式
- Ubuntu 安装 eyeOS
- 通用模型切片处理过程 CesiumLab系列教程
- 文摘:跑了1135 家制造企业,我终于明白它们是怎么把自己玩死的了
- 安装方正电子教室 缺少dll
- HTML5期末大作业:漫网页网站设计——爱影评在线电影(10页面)) 学生动漫网页设计模板下载 大学生HTML网页制作作品 简单漫画网页设计成品 dreamweaver学生网站模板
- JSP+MySQL校园新闻网站(5)–新闻查看功能开发
- Android 29及以上高版本获取SD外部存储器目录
- WEIXIN day_08(8.25) 学子影院项目实践4