VUE动态生成table表格（element-ui）(新增/删除)

（直接复制即可测试）

结构（红色部分 data/prop/v-model 数据绑定）：

<template>
      <el-table size="small" :data="dataForm.list" border>
          <!--addOrUploadFrom <el-table-column type="selection" fixed="left" header-align="center" align="center" width="50">选择</el-table-column> -->
          <el-table-column prop="start" label="开始日期" width="160" header-align="center" align="center">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.start" type="date" placeholder="开始日期" value-format="yyyy-MM-dd"></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column prop="end" label="结束日期" width="160" header-align="center" align="center">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.end" type="date" placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column prop="user" label="用户" width="" header-align="center" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.user" placeholder="用户"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="person" label="负责人" width="" header-align="center" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.person" placeholder="负责人"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" header-align="center" align="center" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="delData(scope.row)"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
    </template>
　　 <template slot="footer">
    　　<el-button size='small' plain icon="el-icon-plus" @click="addData()"> 新增 </el-button>
    </template>

 

模拟数据：

<script>
export default {
  data () {
    return {
      dataForm: {
        id: '',
        list: [
            {user: "张三",start: "2020-10-02",person: "负责人1",end: "2020-10-05"},
　　　　　　　{user: "李四",start: "2020-10-02",person: "负责人2",end: "2020-10-05"}
        ]
      }
    }
  },

　　methods: {　

　　　　addData() { //新增

      　　let obj = {}

      　　　　obj.resumeId = this.dataForm.id //设置一个字段

      　　　　this.dataForm.list.push(obj)

    　　},

　　　　delData(item) {

      　　// 移除当前选中数据

      　　this.dataForm.list.splice(this.dataForm.list.indexOf(item), 1)

    　　}

　　　}

}        

最简单的表格动态生成与移除。