element table加减列

embedded/2024/10/21 19:41:11/
// 有个特别注意的地方,下面这行代码,key一定绑的是item,千万不要绑定index,不然就会出现异常
//<el-table-column v-for="(item,index) in titleList" :key="item"  min-width="150" align="center"><el-table fit :data="definitionList2" border style="margin-top:10px"><el-table-column prop="payeeType" label="车牌号"  fixed="left" width="100" align="center"><template v-slot="{row}"><el-input v-model="row.payeeType"></el-input></template></el-table-column><el-table-column prop="customName" label="超期租金" width="100" align="center"><template v-slot="{row}"><el-input v-model="row.customName"></el-input></template></el-table-column><el-table-column prop="carNo" label="违约金" min-width="150" align="center"><template v-slot="{row}"><el-input v-model="row.carNo"></el-input></template></el-table-column><el-table-column prop="title" label="违章费" min-width="150" align="center"><template v-slot="{row}"><el-input v-model="row.title"></el-input></template></el-table-column><el-table-column prop="pushType2" label="车损费用" min-width="150" align="center"><template v-slot="{row}"><el-input v-model="row.pushType2"></el-input></template></el-table-column><el-table-column prop="pushType2" label="加速折旧费" min-width="150" align="center"><template v-slot="{row}"><el-input v-model="row.pushType2"></el-input></template></el-table-column><el-table-column prop="pushType2" label="超里程费" min-width="150" align="center"><template v-slot="{row}"><el-input v-model="row.pushType2"></el-input></template></el-table-column><el-table-column prop="pushType2" label="尾款" min-width="150" align="center"><template v-slot="{row}"><el-input v-model="row.pushType2"></el-input></template></el-table-column><el-table-column prop="pushType2" label="客户理赔款" min-width="150" align="center"><template v-slot="{row}"><el-input v-model="row.pushType2"></el-input></template></el-table-column><el-table-column prop="pushType2" label="其他扣款费用" min-width="150" align="center"><template v-slot="{row}"><el-input v-model="row.pushType2"></el-input></template></el-table-column>// 前面是固定列,后面是可以加减的列<el-table-column v-for="(item,index) in titleList" :key="item"  min-width="150" align="center"><template slot="header" slot-scope="scope"><span>{{ item }}</span><i class="el-icon-delete delet_tit" @click="titDelet(item)" ></i></template><template slot-scope="scope"><el-input v-model="scope.row.item" ></el-input></template></el-table-column></el-table>// 新增弹框<el-dialog title="添加表格列" :visible.sync="dialogFormVisible" :modal='false' :close-on-click-modal="false" width="30%"><el-input v-model="colName" placeholder="请输入要增加的列名" style="width: 100%;"></el-input><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="getcol()">确 定</el-button></div></el-dialog>
// 这是方法// 添加费用项类型addFess(){this.dialogFormVisible = true},getcol(){this.addCol()this.dialogFormVisible = falsethis.colName = ''},//新增列addCol(){this.dialogFormVisible = trueif(this.colName !==''){this.titleList.push(this.colName)}},// 删除列titDelet(value){this.titleList.map((res,index)=>{if(res==value){this.titleList.splice(index,1)return}})},

在这里插入图片描述
在这里插入图片描述


http://www.ppmy.cn/embedded/10576.html

相关文章

大型网站系统架构演化实例_6.使用分布式文件系统和分布式数据库系统

1.使用分布式文件系统和分布式数据库系统 任何强大的单一服务器都满足不了大型网站持续增长的业务需求。数据库经过读写分离后&#xff0c;从一台服务器拆分成两台服务器&#xff0c;但是随着网站业务的发展依然不能满足需求&#xff0c;这时需要使用分布式数据库。文件系统也一…

uniApp项目总结

前言 大半年的时间&#xff0c;项目从秋天到春天&#xff0c;从管理后台到APP再到数据大屏&#xff0c;技术栈从vue3到uniApp再到nuxt3&#xff0c;需求不停的改&#xff0c;注释掉代码都快到项目总体的三分之一。 一&#xff0c;项目技术栈分析 1.1 项目框架 当前&#xf…

【24年物联网华为杯】赛题分析与初步计划

赛事介绍 官网链接&#xff1a;2024 年全国大学生物联网设计竞赛 (sjtu.edu.cn) 含金量&#xff1a;属于A类赛事 &#xff08;注意&#xff1a;很多搜索结果的序号是按照选入时间排列的&#xff0c;与含金量无关&#xff0c;华为杯是23年选入的&#xff09; Kimi Chat: 全国…

Android 开机流程

Android12 开机流程 Android开机流程的意义在于确保系统硬件设备的正确初始化、加载操作系统内核、启动系统服务,并最终使应用程序能够正常运行。它是Android系统启动的基础,保证了系统的可靠性和稳定性。 初始化硬件设备:在开机流程中,引导加载程序会初始化硬件设备,包括…

【总结】网络安全工作岗位分类

【总结】网络安全工作岗位分类 备注一、职责分类二、技术分类三、建议 备注 2024/04/11 星期四 目前我国网络安全行业还处在起步阶段&#xff0c;安全相关的工作内容没有一个完整的分类&#xff0c;我根据自己的理解进行了总结 一、职责分类 目前很多互联网公司、金融支付公…

SQL CASE 语句

在SQL中的 CASE 语句是一种条件表达式&#xff0c;它允许你在查询中根据条件逻辑返回不同的值。CASE 语句通常有两种形式&#xff1a;简单 CASE 表达式和搜索 CASE 表达式。在我之前给出的优化SQL查询的例子中&#xff0c;使用了简单 CASE 表达式。 这里是简单 CASE 表达式的基…

在Docker容器中部署LibreOffice:通过Dockerfile定制高效办公环境

随着容器技术的普及&#xff0c;Docker已成为快速部署和管理应用的首选工具。LibreOffice作为一款开源的办公套件&#xff0c;以其丰富的功能和兼容性受到许多企业和个人用户的青睐。将LibreOffice集成到Docker容器中&#xff0c;不仅便于跨平台部署&#xff0c;还能实现资源的…

html2pdf,qrcode库及url参数拼接

概览 此篇文章主要是对html2pdf,qrcode库及url参数拼接的零散整理 一. html2pdf html2pdf 是一个可以将 HTML 内容转换为 PDF 文件的库。它通常用于前端或服务器端&#xff0c;将网页或 HTML 字符串转换为可打印或可分享的 PDF 格式。这对于需要将网页内容保存为 PDF 或者生…