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)

    　　}

　　　}

}        

最簡單的表格動態生成與移除。