本文经授权转载至爱编程技术分享博客:  http://code520.net/archives/1006

Element UI是饿了么前端团队开发的适用于vue.js的UI库，和Vue.js结合起来使用可以更快速的开发页面。

通过这几天的学习和实践发现前端开发真是越来越简单方便，各种库各种资源，以前没接触过框架的时候做什么都是jquery,各种DOM操作，页面标签混乱不堪，惨不忍睹。但是有了现在有了vue.js，有了脚手架工具vue-cli，一切都变得和后台开发一样清晰。

相较于JQuery对DOM的操作，vue.js完全不需要操作DOM，什么appendChild之类的DOM操作从此可以抛在脑后，专注交互逻辑，专注更好的用户体验。

vue+element-ui操作删除（单行和批量删除）实例如下

源码展示

<template>
 
<!-- 表格内容 -->
 
<el-table :data="packData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
 
     <el-table-column type="selection" width="55"></el-table-column>
 
     <el-table-column prop="PackingId" label="包装编号" width="120">
 
     </el-table-column>
 
    <el-table-column prop="PackingName" label="包装名称" width="120">
 
    </el-table-column>
 
    <el-table-column prop="PackingPrice" label="包装价格" width="120">
 
    </el-table-column>
 
    <el-table-column prop="PackingImage" label="包装图片">
 
    </el-table-column>
 
    <el-table-column label="操作" width="180">
 
    <template slot-scope="scope">
 
       <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
 
       <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
 
    </template>
 
   </el-table-column>
 
</el-table>
 
<!-- 删除提示框 -->
 
<el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
 
   <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
 
   <span slot="footer" class="dialog-footer">
 
      <el-button @click="delVisible = false">取 消</el-button>
 
      <el-button type="primary" @click="deleteRow" >确 定</el-button>
 
  </span>
 
</el-dialog>
 
</template>
 
 
 
<script>
 
export default {
 
     name: 'pack',
 
     data() {
 
        return {
 
            packData:[],
 
            delVisible：false,//删除提示弹框的状态
 
            msg:"",//记录每一条的信息，便于取id
 
            delarr:[],//存放删除的数据
 
            multipleSelection：[],//多选的数据
 
}},
 
methods:{
 
// 获取数据,这里只简单展示数据，最好可以把当前页面，每页显示数据，搜索等参数传值到后台，因为删除会影响分页和数据
 
getPackData() {
 
         this.$axios.post('/api/selectPackPageMade.do').then((res) => {
 
               this.packData = res.data;
 
          }).catch(function(error){
 
                console.log(error);
 
    })
 
},
 
//单行删除
 
handleDelete(index, row) {
 
       this.idx = index;
 
       this.msg=row;//每一条数据的记录
 
      this.delarr.push(this.msg.PackingId);//把单行删除的每条数据的id添加进放删除数据的数组
 
      this.delVisible = true;
 
},
 
//批量删除
 
delAll() {
 
    this.delVisible = true;//显示删除弹框
 
    const length = this.multipleSelection.length;
 
    for (let i = 0; i < length; i++) {
 
     this.delarr.push(this.multipleSelection[i].PackingId)
 
    }
 
},
 
//操作多选
 
handleSelectionChange(val) {
 
    this.multipleSelection = val;
 
},
 
// 确定删除
 
deleteRow(){
 
    this.$axios.get("/api/delPackTotalMade.do",{
 
       params:{
 
           delarr:this.delarr
 
    }
 
}).then(res=>{
 
    if(res.data=="包装删除成功"){
 
      this.getPackData();
 
      this.$message.success('删除成功')
 
}
 
}).catch(error=>{
 
     console.log(error);
 
    this.$message.error('包装删除失败')
 
})
 
    this.delVisible = false;//关闭删除提示模态框
 
},
 
}
 
</script>