vue+element实现批量删除功能的示例
2018-02-28 08:54
2051 查看
今年开始学习vue+element实现后台开发,在实现批量删除功能时有2个小知识点记录在下:
1、如何实现单击行交替选中当前行的复选框,element官网的table实例中没有找到。――通过row-click和toggleRowSelection实现
2、如何获取选中行的值来实现批量删除。――通过selection-change实现
代码如下
html:
<div class="row mt30 pl15"> <el-button type="warning" @click="delGroup" :disabled="this.sels.length === 0">批量删除</el-button><!--disabled值动态显示,默认为true,当选中复选框后值为false--> </div> <el-table :data="tableList" :fit="true" @row-click="handleCurrentChange" @selection-change="selsChange" ref="table"> <el-table-column type="selection" width="55" reserve-selection=""></el-table-column> <el-table-column prop="id" label="ID" width="150" class-name="bg_blue"></el-table-column> <el-table-column prop="cpsProductId" label="商品ID" width="200"></el-table-column> <el-table-column prop="productName" label="商品名称" width="200" show-overflow-tooltip></el-table-column> <el-table-column label="图片" width="200"> <template scope="data1"> <img :src="data1.row.imgsrc" class="mt10 mb10"> </template> </el-table-column> <el-table-column label="操作" align="center"> <template scope="scope"> <el-button type="primary" size="small" @click="onEditSku(scope.row.id)">编辑</el-button> <el-button size="small" @click="onDelProduct(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table>
js:
<script> export default { name: 'product', mounted() { this.onSearch() }, data() { return { sels: [],//选中的值显示 tableList: [], total: 0, start: 0, size: 10 } }, methods: { selsChange(sels) { this.sels = sels }, delGroup() { var ids = this.sels.map(item => item.id).join()//获取所有选中行的id组成的字符串,以逗号分隔 }, handleCurrentChange(row, event, column) { this.$refs.table.toggleRowSelection(row) } } } </script>
以上这篇vue+element实现批量删除功能的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue+element的表格实现批量删除功能示例代码
- vue+element的表格实现批量删除功能
- vue+element实现批量删除功能
- Vue+element-ui 实现表格的分页功能示例
- PHP+JS实现批量删除数据功能示例
- 使用vue+element实现表格的新增、编辑(含下拉框)、删除功能(Vue开发二)
- PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
- Angular实现较为复杂的表格过滤,删除功能示例
- vue中element 上传功能的实现思路
- vue.js--基础 事件结合双向数据绑定实现todolist,增加和删除功能
- JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
- vue.js实现带日期星期的数字时钟功能示例
- 使用Bootstrap + Vue.js实现添加删除数据示例
- vue上传图片到oss的方法示例(图片带有删除功能)
- iOS开发:一个高仿美团的团购ipad客户端的设计和实现(功能:根据拼音进行检索并展示数据,离线缓存团购数据,浏览记录与收藏记录的批量删除等)
- JS实现复选框的全选和批量删除功能
- 实现购物车结算功能:批量/全部删除,全选,单价/总价,数量增减,页面隐藏/显示
- GridView控件实现批量删除功能(checkbox)
- 基于jsp和servlet,通过复选框实现批量删除的功能
- Oracle + Mybatis实现批量插入、更新和删除示例代码