(直接复制即可测试)

结构(红色部分 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)
      }
   }
}        

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

VUE动态生成table表格(element-ui)(新增/删除)的更多相关文章

  1. 将Highcharts图表数据生成Table表格

    有的时候,我们不仅仅需要漂亮的统计图来显示统计结果,还需要在统计图下方一个表格可以更加直观的展现各类数据.既然统计图都显示出来了,那我们可以根据统计图的各元素生成表格了. 首先,先显示统计图. Htm ...

  2. 动态生成Table内文字换行。

    后台动态生成table,并把td内的文字进行换行. 前台: <body style="width:100%;height:540px;margin-left:0px;margin-to ...

  3. jsp页面根据json数据动态生成table

    根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢? 找了好久,终于找到某位前辈的答案,在此表示衷心 ...

  4. vue动态生成表单

    vue动态生成表单 一.下拉框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...

  5. Jquery解析Json字符串,并且动态生成数据表格Table

    //ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...

  6. 解决 Vue 动态生成 el-checkbox 点击无法赋值问题

    博客地址:https://ainyi.com/68 最近遇到一个问题,在一个页面需要动态渲染页面内的表单,其中包括 checkbox 表单类型,并且使用 Element 组件 UI 时,此时 v-mo ...

  7. 使用dwr时动态生成table的一个小技巧

    这篇随笔是我在07年写的,因为当时用了自己建设的blog,后来停止使用了,今天看到备份数据库还在,恢复出来放到这里.留着记录用. 我在使用DWR时,试了很多次都无法在动态生成的table中的一个或多个 ...

  8. Vue 基于node npm & vue-cli & element UI创建vue单页应用

    基于node npm & vue-cli & element UI创建vue单页应用 开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https ...

  9. .Net Core,VUE,VS Code,Sql Sugar,Element UI学习笔记

    1..Net Core的目的是跨平台,并主要目标是作为服务端开发使用.从3.0开始,引入了Winfrom和WPF. 2..Net Core可以引用.Net Framework生成的dll和exe,不限 ...

随机推荐

  1. Linux下如何部署FTP服务器

    FTP 是 File Transfer Protocol 的缩写,即文件传输协议,它通过网络在服务器和客户端之间传输文件,现在已经成为一种广泛使用的标准工具 vsftpd 是 very secure ...

  2. rsync配置文件讲解

    1.安装rysnc 一般在安装系统时rsync是安装上(yum安装) 2.     vim /etc/xinetd.d/rsync 在这个路径下有配置文件 service rsync { disabl ...

  3. Python中单下划线与双下划线用法总结

    看mentor的脚本时,遇到self._item.callspec.getparam('')语句,理解起来比较困难,找到一篇文章,记录的比较详细,特别记录一下,以备复习. 附链接地址:http://w ...

  4. set类型转string[] 正确写法

    测试源码: 1 @org.junit.Test 2 public void testSetType(){ 3 //测试set类型转string[] 4 // 5 Set<String> s ...

  5. Elasticsearch打造全文搜索引擎(二)

    一.Es的文档.索引的CURD操作 1. elasticsearch概念 集群:一个或多个节点组织在一起 节点:一个节点是集群中的一个服务器,有一个名字来标识,默认是一个随机的漫画角色的名字 分片:将 ...

  6. python 迭代器链式处理数据

    pytorch.utils.data可兼容迭代数据训练处理,在dataloader中使用提高训练效率:借助迭代器避免内存溢出不足的现象.借助链式处理使得数据读取利用更高效(可类比操作系统的资源调控) ...

  7. flume安装及使用

    最近在学习hadoop大数据平台,但是却感觉无从下手,于是看了一些专业的书籍,觉得还是先从下往上为学习也就是从源数据--数据抽取--存储--计算--展示这个路线来学习比较容易一些,所以就先从非结构化数 ...

  8. leetcode 13. 罗马数字转整数 及 12. 整数转罗马数字

    13. 罗马数字转整数 问题描述 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如,罗马数 ...

  9. Cesium源码剖析---视频投影

    Cesium中的视频投影是指将视频作为一种物体材质,实现在物体上播放视频的效果.这个功能在Cesium早期版本中就支持了,在Code Example中有一个示例.今天就来分析一下其内部实现原理. 1. ...

  10. 学习AJAX必知必会(3)~自动重启工具nodemon、缓存问题、请求超时和网络异常、取消重复请求

    1.nodemon 自动重启工具(自动重启基于nodejs开发的服务端应用) ■ nodemon 是一个工具,通过在检测到目录中的文件更改时自动重新启动node应用程序来帮助开发node.js. // ...