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"}
]
}
}
},
}
最简单的表格动态生成与移除。
VUE动态生成table表格(element-ui)(新增/删除)的更多相关文章
- 将Highcharts图表数据生成Table表格
有的时候,我们不仅仅需要漂亮的统计图来显示统计结果,还需要在统计图下方一个表格可以更加直观的展现各类数据.既然统计图都显示出来了,那我们可以根据统计图的各元素生成表格了. 首先,先显示统计图. Htm ...
- 动态生成Table内文字换行。
后台动态生成table,并把td内的文字进行换行. 前台: <body style="width:100%;height:540px;margin-left:0px;margin-to ...
- jsp页面根据json数据动态生成table
根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容,对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢? 找了好久,终于找到某位前辈的答案,在此表示衷心 ...
- vue动态生成表单
vue动态生成表单 一.下拉框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...
- Jquery解析Json字符串,并且动态生成数据表格Table
//ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...
- 解决 Vue 动态生成 el-checkbox 点击无法赋值问题
博客地址:https://ainyi.com/68 最近遇到一个问题,在一个页面需要动态渲染页面内的表单,其中包括 checkbox 表单类型,并且使用 Element 组件 UI 时,此时 v-mo ...
- 使用dwr时动态生成table的一个小技巧
这篇随笔是我在07年写的,因为当时用了自己建设的blog,后来停止使用了,今天看到备份数据库还在,恢复出来放到这里.留着记录用. 我在使用DWR时,试了很多次都无法在动态生成的table中的一个或多个 ...
- Vue 基于node npm & vue-cli & element UI创建vue单页应用
基于node npm & vue-cli & element UI创建vue单页应用 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https ...
- .Net Core,VUE,VS Code,Sql Sugar,Element UI学习笔记
1..Net Core的目的是跨平台,并主要目标是作为服务端开发使用.从3.0开始,引入了Winfrom和WPF. 2..Net Core可以引用.Net Framework生成的dll和exe,不限 ...
随机推荐
- Kafka基础教程(四):.net core集成使用Kafka消息队列
.net core使用Kafka可以像上一篇介绍的封装那样使用(Kafka基础教程(三):C#使用Kafka消息队列),但是我还是觉得再做一层封装比较好,同时还能使用它做一个日志收集的功能. 因为代码 ...
- 基于node和npm的命令行工具——tive-cli
前端开发过程中经常会用到各种各样的脚手架工具.npm全局工具包等命令行工具,如:Vue脚手架@vue/cli.React脚手架create-react-app.node进程守卫工具pm2.本地静态服务 ...
- Centos7上传文件和下载文件命令
https://www.cnblogs.com/patrick-yeh/p/12922829.html 使用工具:SecureCRT 或 Xshell 步骤一:安装lrzsz软件,root权限下.安装 ...
- Thrift框架-具体使用
1.前言 使用thrift心得: (1)thrift是一个RPC的框架 ,RPC是远程过程调用协议:用于进行可扩展且跨语言的服务的开发,以构建在C++.Java.Python.PHP.Ruby.Er ...
- 痞子衡嵌入式:我入选了2021年度与非网(eefocus)星选创作者Top10
本周二「与非网」一个美女运营小姐姐加痞子衡微信,告知痞子衡评上了一个奖,让痞子衡把收件地址告诉她,她把证书寄过来. 昨天痞子衡收到了快递,拆开一看,原来是被评上了 与非网 2021 年度创作者,这个证 ...
- Layui table 学习笔记
templet:'<div>{{createrFormat(d.accounts.name)}}</div>' function createrFormat(o){ retur ...
- 利用python绘制分析路易斯安那州巴吞鲁日市的人口密度格局
前言 数据来源于王法辉教授的GIS和数量方法,以后有空,我会利用python来实现里面的案例,这里向王法辉教授致敬. 绘制普查人口密度格局 使用属性查询提取区边界 import numpy as np ...
- 05.python解析式与生成器表达式
解析式和生成器表达式 列表解析式 列表解析式List Comprehension,也叫列表推导式 #生成一个列表,元素0-9,将每个元素加1后的平方值组成新的列表 x = [] for i in ra ...
- IDEA导入Web项目配置Tomcat启动
1.导入项目 2.配置project 3.导入项目模块 配置Models 4.配置Libraries 5. 6. 7.配置tomcat
- Java实现二叉搜索树的插入、删除
前置知识 二叉树的结构 public class TreeNode { int val; TreeNode left; TreeNode right; TreeNode() { } TreeNode( ...