el-table实现动态表格插入行（开发小记）

实现效果图

table主体代码，通过switchChange字段作为数据框的开关

   <div><el-table :data="list" border style="width: 100%"><el-table-column type="index" label="序号" align="center" width="50"></el-table-column><el-table-column label="测试" align="center"><template slot-scope="scope"><el-input v-model="list[scope.$index].value1" placeholder="请输入"v-if="scope.row.switchChange"></el-input><span v-else>{{ scope.row.value1 }}</span></template></el-table-column><el-table-column label="测试" align="center"><template slot-scope="scope"><el-input v-model="list[scope.$index].value2" placeholder="请输入"v-if="scope.row.switchChange"></el-input><span v-else>{{ scope.row.value2 }}</span></template></el-table-column><el-table-column label="测试" align="center"><template slot-scope="scope"><el-input v-model="list[scope.$index].value6" placeholder="请输入"v-if="scope.row.switchChange"></el-input><span v-else>{{ scope.row.value6 }}</span></template></el-table-column><el-table-column align="center" label="操作" width="150"><template slot-scope="scope"><div class="deal_box"><spanv-if="!scope.row.switchChange"@click="scope.row.switchChange=true">编辑</span><spanv-if="scope.row.switchChange"@click="scope.row.switchChange=false">确认</span><span@click="deletePlan(scope.$index,list)">删除</span></div></template></el-table-column></el-table><div class="button_under"><el-button type="text" @click="insertPlan(list.length)">+添加</el-button></div></div>

按钮样式代码：

.button_under {text-align: center;border: 1px solid #DDDDDD;
}

添加事件insertPlan

   insertPlan(index) {this.outboundList.splice(index + 1, 0,{id: null,item1: "",item2: "",item3: "",item4: "",item5: "",item6: "",switchChange: false,})},

删除事件deletePlan

   deletePlan(index, rows) {rows.splice(index, 1);},

数据的传输，直接将整个list提交给后端就行，我之前博客中有写，前后端List对象的传递

el-table实现动态表格插入行（开发小记）相关推荐

Java利用poi生成word(包含插入图片，动态表格，行合并)
Java利用poi生成word(包含插入图片,动态表格,行合并) 测试模板样式: 图表 1 Word生成结果: 图表 2 需要的jar包:(具体jar可自行去maven下载) Test测试类: imp ...
jQuery - 实现设置指定列给动态表格的行生成自动序号
jQuery - 实现设置指定列给动态表格的行生成自动序号无表头表格 HTML jQuery 示意图有表头表格 HTML jQuery 示意图无表头表格 HTML <table id=&q ...
el table 固定表头和首行_vue表格实现固定表头首列
前言最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
el table 固定表头和首行_el-table表头根据内容自适应，解决表头错位和固定列错位（完美解决）...
将代码复制到指令中即可使用.通过指令方式进行调用.(使用方式 ) 通过计算文字的宽度进行表头设置,其他内容无法计算. 5000个单元格以上根据实际情况使用以上根据实际情况使用,因为单元格越多,计算时间 ...
el table 固定表头和首行_表头太太太复杂了，如何批量打印？简单！
点击上方蓝字关注星标★不迷路本文作者:小敏本文编辑:小叮.竺兰打印工资条估计是财务老师的痛,要把一行行的数据,变成一条条的工资条. 数据很多,表头很复杂. 一个个复制粘贴?那是不可能的! 那怎么办 ...
原生table如何实现表格首行标题冻结
移动端不用插件或者UI库的情况下,对原生写的table,想要实现首行标题行在滚动的时候保持冻结状态(即数据较多时能够吸顶),首先大家想到的是position:fixed属性,但是在表格布局下,你需要调 ...
Power Table(超强动态表格)
代码如下:<!-- All Files Design & Write by Windy_sk, you can use it freely but ... YOU MUST KEEP T ...
ant里面table嵌套子表格_ElementUI el-table行内编辑验证，动态增减行
通过el-from验证动态表格的行内输入 eltable动态增加行或者删除行只需要控制对应的数组就可以实现,行内的验证可以使用el-form的表单验证,直接上代码: el-form嵌套table f ...
POI操作Word中的表格XWPFTable，在指定位置插入行
最近由于客户使用Word文档展示表格中的数据,我TM...Excel它不香嘛,为什么要用Word去展示表格呢??? 但是呢.客户就是上帝,上帝让我们干嘛我们就要干嘛. 1:有这样一个需求,在已有的Wo ...
java向Word模板中替换书签数据，插入图片，插入复选框，插入Word中表格的行数据，删除表格行数据
java向Word模板中替换书签数据,插入图片,插入复选框,插入Word中表格的行数据,删除表格行数据使用插件:spire.doc 创建工具类,上代码: import com.spire.doc.D ...

el-table实现动态表格插入行（开发小记）

el-table实现动态表格插入行（开发小记）相关推荐

最新文章

热门文章