vue 增加 删除

<template>
  <div>
    <div class="button" style="width:6%;float:right;">
      <el-button class="el-icon-plus" @click.prevent="addRow()"></el-button>
    </div>
    <el-table :data="tableData" class="tb-edit" style="width: 100%" highlight-current-row>

      <el-table-column label="日期" width="180">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.date" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.date}}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.name" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址">
        <template scope="scope">
          <el-input size="small" v-model="scope.row.address" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.address}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template 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>
    <br>数据:{{tableData}}
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Message, MessageBox } from "element-ui";

@Component({
  name: "Test",
  components: {},
})
export default class Test extends Vue {
  private tableData = [
    {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    },
    {
      date: "2016-05-04",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1517 弄",
    },
    {
      date: "2016-05-01",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1519 弄",
    },
    {
      date: "2016-05-03",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1516 弄",
    },
  ];
  addRow() {
    var asd: any = {
      date: "2016-05-03",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1516 弄",
    };
    this.tableData.push(asd);
    console.log(this.tableData);
  }
  handleEdit(index, row) {
    console.log(index, row);
  }

  handleDelete(val, row) {
    // 模态框删除按钮
    MessageBox.confirm("是否确认删除本条数据，删除后不可恢复?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "info",
    }).then(() => {
      // 此为假删除，只是删除了模态框中当前行的数据，并没有真正删除表格数据
      this.tableData.splice(val, 1);
      // 如下，接口请求则真正删除表格数据
      let rowId = row.id;
    });
  }
}
</script>

<style lang="less" scoped>

</style>

方法二
<template>
  <el-main>
    <el-col :span="24" class="warp-main" v-loading="">
      <el-form :inline="true" class="demo-form-inline" v-for="(item, i) in FormArr" :key="i">
        <el-form-item label="样例">
          <el-input v-model="item.value"></el-input>
        </el-form-item>
        <el-button type="primary" @click="Delete(item.index)">删除</el-button>
      </el-form>
      <el-button type="primary" @click="AddForm">增加更多</el-button>
    </el-col>
  </el-main>

</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Message, MessageBox } from "element-ui";

@Component({
  name: "Test",
  components: {},
})
export default class Test extends Vue {
  private FormArr: any = [
    {
      index: 0,
      value: "",
    },
  ];
  AddForm() {
    this.FormArr.push({
      index: this.FormArr.length,
      value: "",
    });
    console.log(this.FormArr);
  }

  Delete(index) {
    this.FormArr.splice(index, 1);
    for (let i in this.FormArr) {
      this.FormArr[i].index = i;
    }
  }
}
</script>

<style lang="less" scoped>
.operatorData {
  overflow-y: auto;
  overflow-x: hidden;
  height: 800px;
}
.col {
  display: flex;
  flex-direction: row;
  /deep/ .el-form-item {
    width: 48%;
    margin: 1%;
  }
}
.el-form /deep/ .el-form-item {
  margin-bottom: 2px;
  margin-top: 2px;
}
</style>
<style>
.ztree {
  border: 1px solid #dcdcdc !important;
}
</style>