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

今天药忘吃喽~ 2021-09-08 03:22 748阅读 0赞

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 1]  
然后在其它方法里，直接从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);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70]: /images/20210813/2838402954a84e94946f28fab01466bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70 1]: /images/20210813/7cbdc32a025b43e3879734adafd5f571.png