位置: 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数组和列表的区别)

  • 计提附加税税会计分录
  • 财务软件回收
  • 国际税收协定是怎样避税的
  • 增值税延期滞纳金是多少
  • 个人所得税申报操作流程
  • 自然人独资企业股东承担连带责任
  • 个税申报人员信息采集表模板
  • 工会经费的工资薪金总额包括保险吗
  • 固定资产融资租出计入什么科目
  • 冲企业所得税的分录
  • 销售退回的增值税怎么处理
  • 工程收到奖励款怎么账务处理?
  • 货币性短期薪酬影响损益的金额
  • 公车补贴计入什么科目
  • 企业购买原材料,货款未支付
  • 公司发年终奖怎么发朋友圈
  • 计提工资需要工资表吗
  • 总资产周转率计算公式用不用乘100%
  • 公司购买灯具的会计分录
  • 奖励费收入是什么
  • 报税时利润表没写怎么办
  • 分期收款什么是分期还款
  • 核定征收个体户怎么报税
  • 旅行社小规模差额征税增值税申报表怎么填
  • bois如何设置启动项
  • 禁止局域网用户访问权限
  • 计提的跌价准备销售时怎么处理
  • 外贸出口企业退税计算
  • 增值税专用发票怎么开
  • 会计凭证传递的原则及基本程序
  • 应用程序无法正常启动0xc000012d
  • 补充协议是否缴纳印花税
  • 佣金手续费开什么发票
  • 期末库存盘点表
  • 激光点图片
  • php中定义函数
  • html/css/javascript
  • 应交税费的主要成本
  • 企业在外地单位怎么交税
  • 个人接受现金捐赠的情况
  • 销售免税农产品如何开票
  • mongodb基本使用
  • 固定资产折旧及残值率
  • 财务会计和预算会计金额可以不等吗
  • 企业所得税季度申报表营业收入怎么填写
  • 2013年11号公告企业政策性搬迁
  • 外购不动产用于办公
  • 分公司抬头发票总公司可以抵扣吗
  • 加油费不征税发票怎么开
  • 自产产品用于职工食堂,确认收入吗
  • 审计备案表
  • 用SQL统计SQLServe表存储空间大小的代码
  • ubuntu not authorized to perform operation
  • yum源如何配置
  • windows10电脑重置电脑
  • 怎么设置xp系统
  • win1020h2累积更新
  • linux最常用的shell终端是
  • unity小技巧
  • 清除电脑开机痕迹
  • 随机游戏插件怎么使用
  • python3正则
  • javascript的理解
  • unity closestpoint
  • 深入理解ffmpeg pdf
  • python的设置
  • 蛋哥的日常
  • javascript可以做动态网页吗
  • jquery的validate前端表单验证
  • python的入门教程
  • 企业自建旧房产怎么处理
  • 境外付汇税务备案要多久
  • 广东高速费用支付宝支付如何开发票
  • 青岛市市南区税务局第一税务所
  • 车位过户需要契税发票吗
  • 发票机怎么测试打印
  • 应税和非应税是什么意思
  • 交完契税,房产证没办,契税能退吗
  • 江苏地税局如何交社保
  • 劳务分包需要交什么税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设