vue element-ui el-table多选框多选删除实现

<div class="tbb">
<toolbar-button @click="add" :label="$t('common.add')" icon="el-icon-plus" size="small"></toolbar-button>
<toolbar-button @click="del" :label="$t('common.del')" icon="el-icon-plus" size="small"></toolbar-button>
</div>
<el-table ref="test" :data="testData" style='width:100%;height:100%;' border stripe="true" >
<el-table-column :label="$t('i18nSoftwareTrans.index')" type="index" width="80">
<template slot-scope="scope">
{{(scope.$index + 1)}}
</template>
</el-table-column>
<el-table-column type="selection" prop="rowid" ></el-table-column>
<el-table-column prop="name" label="名称" :show-overflow-tooltip="true" sortable>
</el-table-column>
</el-table>


testData:[{rowid:1,name:"1"},{rowid:2,name:"2"}],

add(){
let len = this.testData.length+1;
this.testData.push({rowid:len,name:`${len}`});
},
del(){
let len = this.testData.length;
for(let item in this.$refs.test.selection){
this.testData.splice(item.rowid - 1,1);
}
},