table添加一行且可编辑 vue_vue表格添加可编辑的一行后如何得到整个表格的数据...
<template>
<div class="bar">
<el-button type="default" v-on:click="print">获取表格数据</el-button>
<el-button type="primary" v-on:click="add">添加一条</el-button>
<el-table
:data="tableData3"
highlight-current-row
@current-change="handleCurrentChange"
height="250"
border>
<el-table-column
inline-template
label="日期">
<div>
<el-input
:value="row.date"
v-model="input">
</el-input>
</div>
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData3: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
}
},
methods: {
handleCurrentChange(val) {
this.currentRow = val;
console.log(val.date,val.name,val.address)
},
add(){
var _data ={
date: '',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}
this.tableData3.push(_data);
},
print(){
console.log(this.tableData3)
}
}
}
</script>
<style>
.bar{
width: 80%;
margin: 16px auto;
}
.bar button{
margin-bottom: 8px;
float: right;
}
.bar button:first-child{
margin-left: 4px;
}
</style>
table添加一行且可编辑 vue_vue表格添加可编辑的一行后如何得到整个表格的数据...相关推荐
- python测试开发django-173.bootstrap实现table表格行内编辑
前言 网上看了很多基于bootstrap的table表格行内编辑,需要基于bootstrap-table,bootstrap-table-edit,x-editable等插件,写的很复杂. 我想实现的 ...
- bootstrap table 表格支持shirt 多选_bootstrap-table 表格行内编辑实现
这篇文章向大家介绍一下如何使用bootstrap table插件实现表格的行内编辑功能. 我的web前端学习交流群点击进入1045267283,欢迎加入! 先放一张效果图: 应用场景 之前的项目也是采 ...
- antd中如何给Table表格添加合计行
最近项目需求:在表格底部添加一行为金额的合计行,然后分页每页都显示,金额字段是后端返回的数据,前端不进行计算. 因为项目的UI框架使用的是Ant Design 3.x版本,找了一下Table的使用方法 ...
- 表格行内编辑增删改查
前言 最近在做一个OA系统,需要将大量excel中的数据录入,并且希望以后新建数据时,也能像excel那样方便.并且这个后台系统有非常多这样的表单.因此需要做一个内敛的表单控件. 上网找到一款编辑起来 ...
- html表格编辑器退出编辑状态,html编辑器的使用方法
核心提示:在本篇教程中将为你介绍html编辑器的使用方法! 系统在许多地方均采用了功能强大的HTML编辑器.通过本编辑器可以直接进行图文混排编辑.表格编辑,也可以将WORD或DREAMWEAVER.F ...
- python docx 表格_python-docx表格添加和删除数据
在使用Python-docx包对表格进行数据的录入,通常采用如下几种方式. 01设置单元格的值 表格中单元格的值有两种赋值方式,一种是直接为cell.text属性赋值来实现,另外一种是通过获取或者添加 ...
- b站 4天从零玩转jQuery【黑马程序员】部分案例代码_表格添加和删除案例
这个是两个视频的内容写在一起了 1.下午07-案例-表格删除 2.下午10-案例-动态数据添加和删除 应该就是这两个视频. <!DOCTYPE html> <html>< ...
- Latex中表格添加注释的方法
latex中表格添加注释,网上方法较多,然而很多注释添加之后并不美观,最好的注释肯定是,注释和表格同宽,注释左对齐.要做到这点,有一组代码可以实现,如何操作需要在这里详细说明. 就像上图的注释. st ...
- arcmap添加字段的类型_ARCGIS之属性表编辑与字段添加
我们矢量化的要素往往具有多种属性,比如创建的林班文件具有林班号.面积.管理员等属性;这些属性一般存储在属性表文件中,通过对属性表的操作可以提取.管理.更改这些属性. 本节课中我会为各位对Arcgis属 ...
- easy ui 可编辑表格，新增行某个字段可以修改，已经存在的数据不允许修改
1. 问题描述,easy ui 可编辑表格,在添加的时候可以进行编辑标题,已经存在的数据不允许编辑标题 2.解决问题的主要方法是区别新增数据和已有数据的区别,easy ui 自带的属性并没又找到区别的 ...
最新文章
- android 高德地图纠偏,高德地图纠偏算法（android ，ios）
- 牛客网 华为机试题 数据重复的筛选问题记录
- Python数据结构与算法—基本概念
- linux内核线性地址等于物理地址,Linux 从虚拟地址到物理地址
- 大话设计模式学习心得2
- Java事实让您大吃一惊！ （信息图）
- 冬奥开幕在即，现场通信网络技术深度揭秘！
- 云网络的守护神：主动链路监控
- Hiberbate中的一对多关联查询
- bzoj 1656: [Usaco2006 Jan] The Grove 树木（BFS）
- 手动安装.app到模拟器simulator, iOS XCode 11
- ＜＜游戏设计艺术＞＞笔记
- gradle配置阿里Maven仓库
- 斗地主系列之牌型大小比较
- 软件考试（一）计算机技术与软件专业技术资格（水平）考试（以下简称软件水平考试）含金量最高，与职称挂钩。
- 测试nfs文件读写速度
- 整合篇：零基础学习与使用ElasticSearch
- [操作系统]关于平均周转时间的一些题目
- 校园二手商城小程序，手把手带你开发一款云开发版商城小程序，校园二手微信小程序，可升级社区团购小程序
- 什么是 Arthas