ElementUI获取表格选择的行数据小技巧
【摘要】
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)