1.html
<div>
<el-button type="warning" @click.native="delGroup" :disabled="this.sels.length === 0">批量删除</el-button><!--disabled值动态显示,默认为true,当选中复选框后值为false-->
</div>
<el-table :data.sync="tableData" border height="520" size="small" class="table"
ref="multipleTable"
style="width:100%"
@sort-change="getSortChange"
@selection-change="handleSelectionChange">
<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
<el-table-column prop="code" label="编号" v-if="show_code"></el-table-column>
<el-table-column prop="title" label="广告名称" v-if="show_title"></el-table-column>
<el-table-column label="操作" width="240" align="center">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.$index, scope.row)" style="padding:0" size="small">
<a href="javascript:;" title="修改"><img src="../../assets/images/update.png" alt="" ></a>
</el-button>
<el-button @click="handleDelete(scope.$index, scope.row)" style="padding:0" size="small">
<a href="javascript:;" title="删除">
<img src="../../assets/images/delete.png" alt="">
</a>
</el-button>
</template>
</el-table-column>
</el-table>
</div>
2.js
<script>
export default {
name: 'product',
mounted() {
this.onSearch()
},
data() {
return {
sels: [],//选中的值显示
tableData: [],
}
},
methods: {
handleSelectionChange(sels) {
this.sels = sels
},
delGroup() {
let state = this.sels.map(item => item);//获取所有选中行的数据
for (let i =0;i<state.length;i++) {
this.deleteList();
}
},
}
}
</script>
网友评论