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="w.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="d" 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="w.user" placeholder="⽤户"></el-input>
</template>vue element admin
</el-table-column>
<el-table-column prop="person" label="负责⼈" width="" header-align="center" align="center">
<template slot-scope="scope">
<el-input v-model="w.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="w)"> 删除 </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 = {}
    sumeId = this.dataForm.id //设置⼀个字段
    this.dataForm.list.push(obj)
  },
    delData(item) {
  // 移除当前选中数据
  this.dataForm.list.splice(this.dataForm.list.indexOf(item), 1)
  }
  　}
}
最简单的表格动态⽣成与移除。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。