Vue+element 实现表格的增加行、根据索引删除行的功能

功能需求：1、实现一个表格，可以增加行 ，可以修改每一行的数据；

2、获取选中的行的数据，获取选中行的索引；

3、根据获取的行的索引删除相应的一行的数据。

<template>
 2   <div class="tableDate">
 3     <div class="button" >
 4       <P><el-button class="el-icon-plus" @click.prevent="addRow()"></el-button></P>
 5       <p><el-button class="el-icon-minus" @click.prevent="delData()"></el-button></p>
 6     </div>
 7     <div class="table">
 8       <el-table
 9         :data="tableData"
10         ref="table"
11         tooltip-effect="dark"
12         border
13         stripe
14         
15         @selection-change='selectRow'>
16         <el-table-column type="selection" width="45" align="center"></el-table-column>
17         <el-table-column label="序号"  type="index" width="60" align="center"></el-table-column>
18         <el-table-column  label="地址" align="center">
19           <template slot-scope="scope">
20               <el-input v-model="scope.row.address"></el-input>
21           </template>
22         </el-table-column>
23         <el-table-column label="男猪脚">
24           <template slot-scope="scope">
25             <el-input v-model="scope.row.name"></el-input>
26           </template>
27         </el-table-column>
28         <el-table-column label="女猪脚">
29           <template slot-scope="scope">
30             <el-input v-model="scope.row.loveer"></el-input>
31           </template>
32         </el-table-column>
33         <el-table-column prop="name" label="天气">
34           <template slot-scope="scope">
35             <el-input v-model="scope.row.weather"></el-input>
36           </template>
37         </el-table-column>
38         <el-table-column label="电话">
39           <template slot-scope="scope">
40             <el-input v-model="scope.row.phone"></el-input>
41           </template>
42         </el-table-column>
43         <el-table-column label="牵手日">
44           <template slot-scope="scope">
45             <el-input v-model="scope.row.date"></el-input>
46           </template>
47         </el-table-column>
48         <el-table-column label="纪念日">
49           <template slot-scope="scope">
50             <el-input v-model="scope.row.mdate"></el-input>
51           </template>
52         </el-table-column>
53       </el-table>
54     </div>
55   </div>
56 </template>

<script>
  import '../../../assets/css/commlist.css'
  import '../../../assets/css/comm.sass'
  import '../../../assets/css/commscoped.sass'
 
  export default {
    data () {
      return {
        tableData: [{
          rowNum: 1,
          address: '西安城墙',
          name: '小哥',
          weather: '下雪',
          phone: '0771-5201314',
          date: '2016-11-22',
          mdate: '2018-04-10',
          loveer: '甜甜圈'
        }, {
          rowNum: 2,
          address: '西安城墙',
          name: '小哥',
          weather: '下雪',
          phone: '0771-5201314',
          date: '2016-11-22',
          mdate: '2018-04-10',
          loveer: '甜甜圈'
        }, {
          rowNum: 3,
          address: '西安城墙',
          name: '小哥',
          weather: '下雪',
          phone: '0771-5201314',
          date: '2016-11-22',
          mdate: '2018-04-10',
          loveer: '甜甜圈'
        }, {
          rowNum: 4,
          address: '西安城墙',
          name: '小哥',
          weather: '下雪',
          phone: '0771-5201314',
          date: '2016-11-22',
          mdate: '2018-04-10',
          loveer: '甜甜圈'
        }, {
          rowNum: 5,
          address: '西安城墙',
          name: '小哥',
          weather: '下雪',
          phone: '0771-5201314',
          date: '2016-11-22',
          mdate: '2018-04-10',
          loveer: '甜甜圈'
        }],
        selectlistRow: []
      }
    },
    methods: {
      // 获取表格选中时的数据
      selectRow (val) {
        this.selectlistRow = val
      },
      // 增加行
      addRow () {
        var list = {
          rowNum: '',
          address: this.address,
          name: this.name,
          weather: this.weather,
          phone: this.phone,
          date: this.date,
          mdate: this.mdate,
          loveer: this.loveer}
        this.tableData.unshift(list)
      },
      // 删除方法
      // 删除选中行
      delData () {
        for (let i = 0; i < this.selectlistRow.length; i++) {
          let val = this.selectlistRow
          // 获取选中行的索引的方法
          // 遍历表格中tableData数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引
          // rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
          val.forEach((val, index) => {
            this.tableData.forEach((v, i) => {
              if (val.rowNum === v.rowNum) {
                // i 为选中的索引
                this.tableData.splice(i, 1)
              }
            })
          })
        }
        // 删除完数据之后清除勾选框
        this.$refs.tableData.clearSelection()
      }
    }
  }
</script>