So implementieren Sie die Batch-Löschfunktion in vue+element-js-Tutorial-php.cn

So implementieren Sie die Batch-Löschfunktion in vue+element

亚连

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

Original

3802 Leute haben es durchsucht

Im Folgenden werde ich Ihnen ein Beispiel für die Implementierung der Batch-Löschfunktion durch vue+element vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Dieses Jahr habe ich begonnen, Vue+Element zu lernen, um die Backend-Entwicklung zu implementieren. Nachfolgend sind zwei kleine Wissenspunkte aufgeführt:

1. Wie man die alternative Auswahl realisiert der aktuellen Zeile, indem Sie auf die Zeile klicken. Das Auswahlfeld wurde in der Tabelleninstanz auf der offiziellen Website des Elements nicht gefunden. ——Erreicht durch Klicken auf die Zeile und ToggleRowSelection

2. So erhalten Sie den Wert der ausgewählten Zeile, um eine Stapellöschung zu erreichen. ——Der Code zum Implementieren von

durch Auswahländerung lautet wie folgt

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie einen statischen Server mit Node.js

So implementieren Sie die entsprechende Rückruffunktion nach dem Laden mit JS-Skript

So verwenden Sie vue+webpack, um das 404-Leerseitenproblem gepackter Dateien zu lösen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Batch-Löschfunktion in vue+element. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!