ElementUI获取表格选择的行数据小技巧

举报
yd_273762914 发表于 2021/06/02 22:44:48 2021/06/02
【摘要】 Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型. el-table加上@select="handleSelection" <el-table ref="Table" :data="apprItemData" :...

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型.
在这里插入图片描述

el-table加上@select="handleSelection"

<el-table
	ref="Table"
	:data="apprItemData"
	:header-cell-style="headClass" @select="handleSelection" row-key="approveItem" :tree-props="{children: 'children'}" height="420"
	border>
</el-table>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
 // 选择表格行
handleSelection (selection, row) {
	this.selectRows = row;
	this.selectTotal = selection.length;
	//console.log(row);
	//console.log(selection.length);
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述
然后在其它方法里,直接从this获取自己定义的vue对象拿就行

var rows = this.selectRows;
console.log("rows:"+rows);
 var size = this.selectTotal;
 console.log("size:" + size);
 if (size < 1) { top.dialog({title: '提示',content: "请选择至少一个选项!"}).show(); return;
 }
var selItemName = rows.itemName;

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

对表格数据进行遍历:

let approveItems ="";
 let itemArr = [];
 this.$refs.Table.selection.forEach(e => { itemArr.push(e.approveItem)
 })
 console.log("itemArr:" +itemArr);
 approveItems = itemArr.toString();
 console.log("approveItems:"+approveItems);

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

文章来源: smilenicky.blog.csdn.net,作者:smileNicky,版权归原作者所有,如需转载,请联系作者。

原文链接:smilenicky.blog.csdn.net/article/details/117457451

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。