(直接复制即可测试)

结构(红色部分 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 之 nginx安装步骤

    配置规划 用户 lzh 用户目录  /lzh 下载 进入官网下载nginx http://nginx.org/download/ 安装 解压 cd /lzh/app tar -zxvf nginx-1 ...

  2. post请求后获取不到请求头信息的原因

    在前台获取数据时,因为没有条件,所以不用传数据,用的post请求.再添加token验证时想着前端在请求时直接添加一个请求头信息就ok 没想到后台却获取不到请求头信息,打印了下日志发现是null,这是怎 ...

  3. sqlcl - Exception in thread "main" java.lang.UnsupportedClassVersionError: Bad version number in .class file

    运行sqlcl的命令sql出错 bash-4.2$ sql username/password@hostname:1521:databasename Exception in thread " ...

  4. java 多态 总结

    1.前言 引用教科书解释: 多态是同一个行为具有多个不同表现形式或形态的能力. 多态就是同一个接口,使用不同的实例而执行不同操作. 通俗来说: 总结:多态的抽象类与接口有点相似: 父类不需要具体实现方 ...

  5. Python科学计算类库

    Numpy是什么 Numpy是一个开源的Python科学计算库.使用Numpy,就可以很自然地使用数组和矩阵.Numpy包含很多实用的数学函数,涵盖线性代数运算.傅里叶变换和随机数生成等功能. 矩阵: ...

  6. 【刷题-LeetCode】179 Largest Number

    Largest Number Given a list of non negative integers, arrange them such that they form the largest n ...

  7. 【刷题-LeetCode】162 Find Peak Element

    Find Peak Element A peak element is an element that is greater than its neighbors. Given an input ar ...

  8. X架构键盘选购指南

    X架构键盘 联想 JME8002(未知) JME7597(推荐) 据说是ThinkPAD键盘的血统. Thinkapad 小红点键盘,据说腿撑容易坏 明基 明基精钢侠 海湾海贝(键程长,不累手,但不易 ...

  9. JUC之Fork/Join框架

    Fork/Join框架和异步 定义: Fork/Join框架是Java 7提供的一个用于并行执行任务的框架,是一个把大任务分割成若干个小任务,最终汇总每个小任务结果后得到大任务结果的框架.类似于递归或 ...

  10. 程序员必备的编程助手!SmartCoder助你轻松集成HMS Core

    当开发者在集成HMS Core遇到一些疑问时,需要翻阅官网文档,反复查看集成说明或者API调用说明,或者研究GitHub上的开源示例代码,花费较多的时间,在IDE环境和网页浏览器之间反复切换也会耗费很 ...