【vue】element实现table的增加行和批量删除行功能

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/dangbai01_/article/details/83745714

<template>
  <div id="app">
  <el-table
    ref="multipleTable"
    :data="tableData3"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">

    <el-button @click="delMulData()">批量删除</el-button>
    <el-button @click="addData()">增加数据</el-button>
  </div>
</div>

</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        tableData3: [{
          rowNum:1,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          rowNum:2,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          rowNum:3,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          rowNum:4,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          rowNum:5,
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          rowNum:6,
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          rowNum:7,
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },

    methods: {
      //正常情况下是需要弹出一个dialog输入数据的，这里我们只是模拟一下实现方法
      //注意因为我们添加的是固定rowNum，所以批量删除的时候新增的会一样，正式代码中不会存在类似情况
      addData(){
        var data={
          romNum:100,
          date:'2018-12-3',
          name:'当白',
          address:'郑州市二七区'
        }
        this.tableData3.unshift(data)

      },



      delMulData(){
        //拿到选中的数据
        let val = this.multipleSelection
        //如果选中数据存在
        if(val){
            //将选中数据遍历
            val.forEach((val,index) =>{
              //遍历源数据
              this.tableData3.forEach((v,i)=>{
                //如果选中数据和源数据的某一条唯一标识符相等，删除对应的源数据
                if(val.rowNum === v.rowNum){
                  this.tableData3.splice(i,1)
                }
              })
          })
        }
        //清除选中状态
        this.$refs.multipleTable.clearSelection()

      },


      //得到选中数据
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>