位置: IT常识 - 正文

使用Element时默认勾选表格toggleRowSelection方式(element remove)

编辑:rootadmin
这篇文章主要介绍了使用Element时默认勾选表格toggleRowSelection方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教 目录

推荐整理分享使用Element时默认勾选表格toggleRowSelection方式(element remove),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:elements怎么用,element key,element key,element.key,element-wise add,element current,element remove,element remove,内容如对您有帮助,希望把文章链接给更多的朋友!

Element时默认勾选表格toggleRowSelection页面效果使用方法:toggleRowSelectiontable表格渲染element表格默认勾选不生效的问题默认勾选可以这样做如果不生效的话,一般需要考虑这几种情况Element时默认勾选表格toggleRowSelection页面效果

在页面初始化加载时将表格中某行默认选中

使用方法:toggleRowSelection方法名说明参数toggleRowSelection用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)row, selectedtable表格渲染

方法名说明参数toggleRowSelection用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)row, selectedtable表格渲染

<el-table :data="listPowerSupplyTab" border ref="listPowerSupplyTab" width="100%"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-columnprop="powerSupplyStationName"label="供电所名称"width="180"></el-table-column><el-table-columnprop="powerSupplyStationAddress"label="供电所地址"width="180"></el-table-column><el-table-columnprop="contacts"label="联系人"></el-table-column><el-table-columnprop="telephone"label="电话"></el-table-column><el-table-columnprop="powerSupplyMode"label="供电方式 "></el-table-column><el-table-columnprop="capacity"label="配电容量 "></el-table-column><el-table-columnprop="subordinatePowerSupplyBureau"label="所属供电局 "></el-table-column></el-table>

注意:

1、注意el-table上有一个ref="listPowerSupplyTab"的属性

2、toggleRowSelection(row, selected)接受两个参数,row传递被勾选行的数据,selected设置是否选中

使用Element时默认勾选表格toggleRowSelection方式(element remove)

使用watch监听listPowerSupplyTab数据

watch:{listPowerSupplyTab(n,o){this.$nextTick( ()=> {this.$refs.listPowerSupplyTab.toggleRowSelection(this.listPowerSupplyTab[0],true);})},},

ref引用到Dom元素上,再执行dom上的toggleRowSelection方法。

当页面有隐藏显示的tab页签时

因为一次性加载数据,因而监听active的变化

watch:{//监听activeactive: {handler(n,o){this.$nextTick(()=> {if(n == '6'){this.listPowerSupplyTabNew.forEach((ele,indexItem) => {if(ele.type=='1'){this.$refs.listPowerSupplyTabRef.toggleRowSelection(ele);}})}else if(n == '7'){this.technicalInformationNew.forEach((ele,indexItem) => {if(ele.type=='1'){this.$refs.technicalInformationNewRef.toggleRowSelection(ele);}})}})},immediate: true,deep: true},},element表格默认勾选不生效的问题默认勾选可以这样做

this.$refs.multipleTable.toggleRowSelection(row);如果不生效的话,一般需要考虑这几种情况

1、获取数据(选中的数据以及表格展示的数据)这里的两个数据必须是同一个对象的数据,也就是数据必须是表格当中的数据,而且 不能深拷贝

2、设置表格数据

3、设置完成后,一般我们都是获取到后端的代码再设置this.$refs.multipleTable.toggleRowSelection(row);

这里还要加一个$nextTick

具体代码如下:

/*** @description: 获取表格数据* @param {String} code* @param {String} srcType*/async getTableData(code, srcType) {try {this.tipContent = 'loading'const { result } = await querySubTabDefine({tableSrcType: srcType,subjectCode: code})for (const item of result) {item.select = item.flag === '1'}this.tableData = resultthis.$nextTick(() => {for (const row of this.tableData) {row.select && this.$refs.table.toggleRowSelection(row, true)}})// console.log(selectArr)this.tipContent = this.tableData.length ? false : 'empty'this.layoutTable()} catch (error) {console.error(error)this.tipContent = 'error'this.tableData = []}},

其中最主要是这一步

this.$nextTick(() => {for (const row of this.tableData) {row.select && this.$refs.table.toggleRowSelection(row, true)}})

以上为个人经验,希望能给大家一个参考,也希望大家多多支持本站。

本文链接地址:https://www.jiuchutong.com/zhishi/310228.html 转载请保留说明!

上一篇:Python中的多进程是什么(python的多进程模块)

下一篇:python中numpy数组合并的两种方法(python中numpy数组和列表的区别)

  • 房地产开发企业资质管理规定
  • 小微企业年度所得税优惠政策
  • 收到补助款怎么入账
  • 提供劳务企业所得税纳税义务发生时间
  • 增值税税控系统专用设备
  • 土地增值税筹划实战
  • 以实物抵债账务协议
  • 建筑安装业什么时候确认收入
  • 没收租赁保证金开什么内容的发票
  • 出租设备应计入什么科目
  • 免税企业收到增值税专用发票咋办
  • 退包装物冲减货款怎么算
  • 发行收入要减去股本吗
  • 预收账款企业所得税怎么处理会计分录
  • 农业生产企业是指什么
  • 互联网合同要交社保吗
  • 税务局查账征收转为核定征收之程序
  • 董事会费用计入什么科目
  • 开办费要如何扣款
  • 旅行社代订住宿发票能报销吗
  • 吊装费和吊车费是一样的不?
  • 采购的增值税
  • 应收账款无法收回确认为坏账分录
  • 免征附加税费
  • 怎样解除机房
  • iphone制造成本
  • 出售使用过的车辆如何交印花税呢
  • 出口企业增值税怎么算
  • 以前年度未入账固定资产账务处理
  • 事业单位资产管理中存在的问题及整改措施
  • vue的watch监听props
  • 安装和配置eclipse集成开发环境
  • 企业官网用什么系统
  • sqlserver2005属于
  • 跨年度冲红字发票补正账务如何处理
  • sqlserver高并发性能差
  • 主营业务成本是什么科目
  • 应收在借方什么意思
  • 标书费没有发票合理吗
  • 房产增值税发票可以抵税吗
  • 先收票后收货
  • 手工账登账格式
  • 收到科技局研发项目资金计入什么科目
  • 一般存款账户可以办理现金缴存但不得办理现金支取
  • 商誉的算法
  • 公司销售部门购买产品
  • 影响折旧的因素有哪三个方面
  • 数据库表的查询操作实验
  • win7激活失败提示错误代码0x80072F8F
  • windows2000自动登陆
  • window英语
  • win7系统控制面板在哪里打开
  • ubuntu kylin 14.04下载 ubuntu优麒麟14.04 lts下载地址
  • windows unistd.h
  • win7原始账号和密码
  • 更改mac地址值
  • win8怎么添加wifi
  • win10查看驱动
  • linux计划任务执行脚本
  • javascriptz
  • cocos2d官网
  • cocos2d rpg
  • jquery 图片放大预览
  • Python heapq使用详解及实例代码
  • js函数的使用规则
  • nodejs cli
  • linux jhat
  • js从数组中选出最大的三个数
  • js怎么定义类
  • gridlayout用法
  • python的对象
  • android canvas rotate
  • 医保12333查询系统
  • 税务局房屋评估怎样做低
  • 天津河东区医院地址电话
  • 广西自然人税收管理系统扣缴客户端手机版
  • 宁夏到新疆多少公里?
  • 广州市地方税务局规费服务中心
  • 什么是增值税留抵退税
  • 宁阳旧城改造名单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设