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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM