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

  • 应纳税所得额是什么意思
  • 应税工资怎么计算出来的
  • 小规模纳税人税费会计分录
  • 交易性金融资产属于什么科目
  • 烟丝是消费税的征收范围
  • 电信宽带个人和公司办收费标准
  • 行政单位盘盈固定资产应按什么入账
  • 销售收入打折后怎么算
  • 待抵扣进项税额冲回
  • 收到政府补贴现金流量表怎么填
  • 个人所得税没有税也要申报吗
  • 公司购买商业险多少钱
  • 缴纳土地出让金购买的土地是无形资产吗
  • 微信转账手续费怎么算
  • 个人如何缴纳公共维修基金
  • 发票作废 费用
  • 个体户增值税怎么算
  • 实收资本印花税税率
  • 增值税专用发票抵扣期限
  • 补发工资补缴公积金一直没到账
  • 怎么确认投资性资金
  • 旅游服务费如何入账
  • windows11如何
  • 电脑经常蓝屏修复
  • 银行汇票与银行本票的区别
  • 今年利润弥补以后怎么算
  • SIMETER.EXE - SIMETER是什么进程 有什么用
  • windows10什么时候上市
  • 补缴社保操作流程
  • 如何关闭win10专业版自动更新
  • 企业雇佣临时工的工资属于工资薪金支出么
  • PHP:pcntl_waitpid()的用法_PCNTL函数
  • 新空调的安装费是多少
  • 会计分录的表现形式有
  • 海恩斯科普简介
  • 销售下脚料所收的费用
  • php使用函数限制字符串长度和格式
  • 基于YOLOv5的中式快餐店菜品识别系统
  • 社会团体会员费做分录
  • 企业注销亏损怎么处理
  • phpcms使用教程
  • 进项加计抵减会计分录怎么做
  • 出租厂房计提折旧会计分录
  • 租赁公司一般都有什么税
  • mysql5.7.35安装配置教程
  • mongodb4.4安装
  • 原材料结转成本有几种方法
  • 年终奖的个税税率
  • 其他综合收益算当期损益吗
  • 存货发出的计价方式有哪些
  • 成本结账是什么意思
  • 服务业预收账款什么时候确认收入
  • 固定资产盘亏所得税清算时怎么处理
  • 短期负债率和流动负债率
  • 以前年度的销售退回能否直接冲减销售收入
  • 其他应收款与其他应付款对冲分录
  • 三栏式明细账适用于总分类账
  • 企业发生的经济业务主要有哪些
  • 农民工工资专户怎么发放工资
  • 特许权使用费税前扣除
  • 日记账的建账工作
  • sql server2000个人版安装步骤
  • centos直接安装
  • centos云服务器
  • win7虚拟内存如何转移到D盘
  • win10预览文件怎么显示内容
  • linux查询ipv4
  • 不同系统电脑能共享吗
  • Cocos2dx 3.2 + vs2012 + win7 改变面黑色背景的大小
  • Android中的touch事件
  • opengl es3.0
  • javascript如何学
  • 网络自定义怎么打开
  • 如何用unity
  • javascript怎么用
  • 湖北税务局2021新通知
  • 福利企业免税有哪些项目
  • 混合销售定义是什么意思
  • 交完契税,房产证没办,契税能退吗
  • 税收筹划可分为
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设