element table加减列

// 有个特别注意的地方,下面这行代码,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 = false
            this.colName = ''
        },
        //新增列
        addCol(){
            this.dialogFormVisible = true
            if(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.mfbz.cn/a/558424.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序酒店选择日期和入住人数(有效果图)

效果图 app.vue onLaunch:function(options){this.defaultcache()}defaultcache(){// 入住信息缓存var arr this.getDateTime();var ReserVation {reservType:0,//1 人数 2日期InCheckin:{},//入离日期peopleArr:[{title:成人,num:2},{title:儿童,num:0},{title:宝子,num:1…

【C语言__动态内存管理__复习篇6】

目录 前言 一、动态内存管理 二、动态内存函数 2.1 malloc 2.2 free 2.3 calloc 2.4 realloc 三、动态内存常见的6个使用错误 3.1 接收malloc/calloc返回的参数后未及时检查是否为NULL 3.2 越界访问动态内存空间 3.3 对非动态开辟的内存使用free释放 3.4 使用free只释放了…

【GoWeb框架初探——GRPC】

1. GRPC介绍 1.1 什么是RPC RPC全程是Remote Procedure Call&#xff0c;远程过程调用。这是一种协议&#xff0c;是用来屏蔽分布式计算中的各种调用细节&#xff0c;使得你可以像是本地调用一样直接调用一个远程的函数。 调用流程 1&#xff09;客户端发送数据&#xff08;…

flutter 谷歌的苹果系统消息推送

flutter firebase 云消息通知教程 (android-安卓、ios-苹果) Android、ReactNative、Flutter集成Firebase推送注意事项 Android&#xff1a;Firebase 凭据 iOS&#xff1a;基于 p8 令牌的 APN 连接 iOS&#xff1a;p12 生成证书 Flutter之对接国外推送onesignal踩坑笔记&a…

基于SSM的平面设计课程在线学习平台系统(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的平面设计课程在线学习平台系统&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;…

C++:STL-list模拟实现:迭代器的封装

STL-list模拟实现细节 一. 模拟实现的思想细节1.迭代器实现&#xff1a;用类进行封装2.和--的重载3.奇怪的->重载4.const迭代器 二.实现源码 一. 模拟实现的思想细节 1.迭代器实现&#xff1a;用类进行封装 为什么不使用原生指针&#xff1a; ​ 相比于vector和string&am…

9.Godot数组|遍历|静态变量|对象|调试

数组和字典的遍历 数组的概念 数组是一组数据的集合。在程序中负责批量处理数据。数组中的元素可以包括各个类型的数据&#xff0c;也可以对数组内数据类型进行限定。可以通过 数组名【数字】 的形式来访问数组元素&#xff0c;数字 0 代表数组的第一个元素。数组可以通过调用…

《中学科技》是什么级别的刊物?如何投稿?

《中学科技》是什么级别的刊物&#xff1f;如何投稿&#xff1f; 《中学科技》创刊于1976年&#xff0c;由上海世纪出版&#xff08;集团&#xff09;有限公司主管&#xff0c;上海科技教育出版社有限公司主办的省级学术期刊&#xff0c;《中学科技》以传播科技知识、启迪智慧…

蓝桥杯2024年第十五届省赛真题-宝石组合

思路&#xff1a;参考博客&#xff0c;对Ha,Hb,Hc分别进行质因数分解会发现&#xff0c;S其实就等于Ha&#xff0c;Hb&#xff0c;Hc的最大公约数&#xff0c;不严谨推导过程如下&#xff08;字丑勿喷&#xff09;&#xff1a; 找到此规律后&#xff0c;也不能枚举Ha&#xff…

AI容器化部署开发尝试 (一)(Pycharm连接docker,并部署django测试)

注意&#xff1a;从 Docker 19.03 开始&#xff0c;Docker 引入了对 NVIDIA GPU 的原生支持&#xff0c;因此若AI要调用GPU算力的话docker版本也是有要求的&#xff0c;后面博客测试。 当然本篇博客还没设计到GPU的调用&#xff0c;主要Pycharm加Anaconda的方案用习惯了&#…

基于Springboot的社区待就业人员信息管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的社区待就业人员信息管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三…

pdf加水印怎么加?自己原创的PDF资料分享到网络上需要采取一些版权保护的措施,添加水印就是个不错的选择

一&#xff0c;水印的基本概念 水印通常是一种用于标识文件来源、版权信息或防止非法复制的标记。它可以是文字、图形或图像等形式&#xff0c;以半透明或半淡化的方式嵌入到文件中&#xff0c;既不影响文件的正常阅读&#xff0c;又能起到标识和保护的作用。 二&#xff0c;…

mars3d实现禁止地图移动,禁止地图左右平移,但是鼠标可以移动的效果。

new mars3d.layer.GeoJsonLayer({渲染后实现鼠标左键按住不释放拖动时&#xff0c;地图不跟着拖动效果 当前问题&#xff1a; 1.在map初始化&#xff0c;或者是加载效果的时候&#xff0c;整个地球的场景都是一样的。 如果鼠标左键按住不释放&#xff0c;在屏幕上拖动的时候…

设计模式代码实战-责任链模式

1、问题描述 小明所在的公司请假需要在OA系统上发布申请&#xff0c;整个请求流程包括多个处理者&#xff0c;每个处理者负责处理不同范围的请假天数&#xff0c;如果一个处理者不能处理请求&#xff0c;就会将请求传递给下一个处理者&#xff0c;请你实现责任链模式&#xff…

C++:map和set的使用

一、关联式容器介绍 在学习map和set之前&#xff0c;我们接触到的容器有&#xff1a;vector、list、stack、queue、priority_queue、array&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面存储的是元素本身。 关联式容器也是用…

Appian发布最新版本:通过AI流程自动化推动业务发展

Appian公司于2024年4月16日在弗吉尼亚州麦克莱恩宣布推出Appian平台的最新版本。此版本引入了Process HQ&#xff0c;这是一个集流程挖掘和企业AI于一体的系统&#xff0c;结合了Appian的数据平台。Process HQ为企业运营提供前所未有的可见性&#xff0c;支持数据驱动的决策和流…

微信小程序四(全局配置和页面配置页面跳转)

全局配置&#xff1a; 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置&#xff0c;决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等 tabBar设置&#xff1a;最少两个最多5个 "tabBar": {"list":[{"pagePath": &qu…

【若依】代码生成详细教程(单表、主从表、树形表增删改查)

若依代码生成开发接口 修改代码生成配置一、单表实现增删改查1. 新建数据库表结构2. 新建模块&#xff0c;解决项目依赖3. 启动项目&#xff0c;新建菜单4. 导入数据表&#xff0c;自动生成代码5. 将生成代码粘贴到对应的模块&#xff0c;执行生成的sql&#xff08;用于生成菜单…

OpenHarmony网络协议通信—nanopb

简介 nanopb是一种小代码量的协议缓冲区实现&#xff0c;适用于任何内存受限的系统。 下载安装 直接在OpenHarmony-SIG仓中搜索nanopb并下载。 使用说明 以OpenHarmony 3.1 Beta的rk3568版本为例 将下载的Nanopb库代码存在以下路径&#xff1a;./third_party/nanopb 修改添…

一键设置个性手机壁纸:苹果手机怎么设置动态壁纸?

在苹果手机上设置动态壁纸是一种让你的手机屏幕更生动、更有趣的方式。无论是流动的水滴、绚丽的光影还是动态的星空&#xff0c;动态壁纸可以为你的手机带来全新的视觉体验。苹果手机怎么设置动态壁纸&#xff1f;在本文中&#xff0c;我们将介绍苹果手机上如何设置动态壁纸的…
最新文章