How to implement batch deletion function in vue+element-JS Tutorial-php.cn

How to implement batch deletion function in vue+element

亚连

Release： 2018-06-04 10:48:55

Original

3753 people have browsed it

Below I will share with you an example of how vue element implements the batch deletion function. It has a good reference value and I hope it will be helpful to everyone.

This year I started to learn vue element to implement backend development. When implementing the batch deletion function, there are 2 small knowledge points recorded below:

1. How to realize the check selection of the current row by clicking on the row alternately The box was not found in the table instance on the element official website. ——Achieve through row-click and toggleRowSelection

2. How to obtain the value of the selected row to achieve batch deletion. ——Through selection-change, the code is as follows

html：

<p class="row mt30 pl15">
   <el-button type="warning" @click="delGroup" :disabled="this.sels.length === 0">批量删除</el-button><!--disabled值动态显示，默认为true,当选中复选框后值为false-->
  </p>
  <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>

Copy after login

js：

<script> 
export default { 
 name: &#39;product&#39;, 
 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>

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement a static server using Node.js

How to implement the corresponding callback function after loading using JS script

How to use vue webpack to solve the 404 blank page problem of packaged files

The above is the detailed content of How to implement batch deletion function in vue+element. For more information, please follow other related articles on the PHP Chinese website!