element-ui可编辑行增加行或删除行

<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button @click="add">增加</el-button>
      <el-button @click="dels">批量删除</el-button>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column type="selection" width="45"></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-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="del(scope.row, scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
// api
import tableApi from '@/api'
export default {
  data() {
    return {
      tableData: [
        {
          id: '0',
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: '1',
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: '4',
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: '5',
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: '6',
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      multipleSelection: []
    }
  },
  methods: {
    // 增加行 保存方法
    add() {
      const row = {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }
      this.tableData.unshift(row)
    },
    /**
     * 删除行 删除方法
     */
    dels(row) {
      // 选中行
      let rows= this.$refs.multipleTable.selection;
      rows.forEach(function(item,index,arr){
      this.tableData.forEach(function(_item,_index,_arr){
        // 根据ID判断是否是选中行
        if(item.id == _item.id){
          // 删除当前行
          this.tableData.splice(_index,1);
        }
      });
    });
    }
  }
}
</script>

<el-table-column
  prop="name"
  label="姓名"
  width="180">
  <template slot-scope="scope">
    <!--可编辑列-->
    <el-input v-if="scope.row.status" v-model="scope.row.name"></el-input>
    <!--显示-->
    <span v-else>{{scope.row.name}}</span>
  </template>
</el-table-column>
<el-table-column
  prop="address"
  label="地址"
  :formatter="formatter">
  <template slot-scope="scope">
    <!--可编辑列下拉选择-->
    <el-select  v-if="scope.row.status" v-model="scope.row.address" placeholder="请选择">
      <el-option v-for="item in cityList" :key="item" :label="item" :value="item"></el-option>
    </el-select>
    <span v-else>{{scope.row.address}}</span>
  </template>
</el-table-column>