Comment implémenter la fonction de suppression par lots dans vue+element-js tutoriel-php.cn

Comment implémenter la fonction de suppression par lots dans vue+element

亚连

Libérer： 2018-06-04 10:48:55

original

3803 Les gens l'ont consulté

Ci-dessous, je vais partager avec vous un exemple de vue+element implémentant la fonction de suppression par lots. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Cette année, j'ai commencé à apprendre vue+element pour implémenter le développement backend. Lors de l'implémentation de la fonction de suppression par lots, il y a 2 petits points de connaissances enregistrés ci-dessous :

1 Comment réaliser la sélection alternative. des doublons de la ligne actuelle en cliquant sur la ligne. La boîte de sélection n'a pas été trouvée dans l'instance de tableau sur le site officiel de l'élément. ——Obtenu par clic sur ligne et basculeRowSelection

2. Comment obtenir la valeur de la ligne sélectionnée pour réaliser une suppression par lots. ——Le code à implémenter

via sélection-changement est le suivant

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>

Copier après la connexion

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>

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment implémenter un serveur statique à l'aide de Node.js

Comment implémenter la fonction de rappel correspondante après le chargement à l'aide Script JS

Comment utiliser vue+webpack pour résoudre le problème des pages blanches 404 des fichiers packagés

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!