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

Posted 2021-06-22 smileNicky

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>

 // 选择表格行
handleSelection (selection, row) {
	this.selectRows = row;
	this.selectTotal = selection.length;
	//console.log(row);
	//console.log(selection.length);
}

然后在其它方法里，直接从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;

对表格数据进行遍历：

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);