element table加减列

news2025/1/16 8:58:12
// 有个特别注意的地方,下面这行代码,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.coloradmin.cn/o/1608819.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

x-cmd mod | x whisper - 使用 whisper.cpp 进行本地 AI 语音识别

介绍 Whisper 模块通过 whisper.cpp 帮助用户快速将音频转换为文字。 INFO: whisper.cpp 是一个用 C/C 编写的轻量级智能语音识别库&#xff0c;是基于 OpenAI 的 Whisper 模型的移植版本&#xff0c;旨在通过深度学习模型实现音频转文字功能。 由于 whisper.cpp 目前只支持 1…

react 响应式栅格布局

遇到一个小问题 , 有很多的下拉框放在了一行的盒子里 用到了栅格思路 , 但响应式处理屏幕时候右侧的按钮会覆盖掉样式 之前我的思路是子绝父相 , 将按钮定在最右侧 , 按钮和下拉框都在同一盒子中 , 且做了栅格处理没想到还是会覆盖解决 : 后来我用到了 margin-left: auto 来让…

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

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

Golang 采集爬虫如何配置代理 IP

在 Golang 中配置代理 IP&#xff0c;可以通过设置 http.Transport 的 Proxy 属性来实现&#xff1a; 下述代码中的 代理IP 和 端口 替换为实际的代理服务器地址和端口&#xff0c;然后运行该程序即可通过代理服务器访问对应网站。 package mainimport ("fmt""…

Maven实战—搭建微服务 Maven 工程架构

需求案例&#xff1a;搭建一个电商平台项目&#xff0c;该平台包括用户服务、订单服务、通用工具模块等。 项目架构&#xff1a; 用户服务&#xff1a;负责处理用户相关的逻辑&#xff0c;例如用户信息的管理、用户注册、登录等。订单服务&#xff1a;负责处理订单相关的逻辑…

智慧园区引领产业智能化升级:科技创新驱动打造智慧化、高效化产业新未来

随着全球科技革命的深入推进&#xff0c;以大数据、云计算、物联网、人工智能等为代表的新一代信息技术正深刻改变着传统产业的发展模式。在这一背景下&#xff0c;智慧园区作为产业智能化升级的重要载体和平台&#xff0c;正以其前瞻性的规划、创新的科技和卓越的实践&#xf…

论文精读--Learning Efficient Object Detection Models with Knowledge Distillation

在目标检测任务中&#xff0c;存在特殊的挑战&#xff1a; &#xff08;1&#xff09;目标检测任务标签信息量更大&#xff0c;根据标签学到的模型更为复杂&#xff0c;压缩后损失更多 &#xff08;2&#xff09;分类任务中&#xff0c;每个类别相对均衡&#xff0c;同等重要…

C语言 实现带透明度的鼠标光标 .cur 编辑器

操作参考&#xff1a; .cur 鼠标光标编辑器-CSDN博客 增加了滑块修改透明度 有一个bug&#xff0c;就是取色在绘图板上取色时&#xff0c;取到的颜色的透明度是0&#xff0c;也就是说&#xff0c;同样的颜色&#xff0c;有的是透明出来的&#xff0c;有的就是本身的颜色。但…

C++的发展和特点

1.C的发展史 C是由Bjarne Stroustrup&#xff08;本贾尼斯特劳斯特卢普 1950~&#xff09;博士在贝尔实验室工作期间开发的。最初C被称为new C&#xff0c;后来为了体现它是一种带类的面向对象语言&#xff0c;将其改名为C with class。1982年命名为C。 C从诞生至今&#xff0…

python 头文件怎么写

本文主要以python2为例。首先介绍一下Python头文件的编程风格&#xff0c;然后再给大家详细介绍import部分的基本用法。这两个部分就是Python中头文件的组成模块。 编程风格 #!/usr/bin/env python #在文件头部 ( 第一行 ) 加上 设置 Python 解释器 # -*- coding: utf…

Rabbit加密算法:性能与安全的完美结合

title: Rabbit加密算法&#xff1a;性能与安全的完美结合 date: 2024/4/19 19:51:30 updated: 2024/4/19 19:51:30 tags: Rabbit加密对称加密流密码密钥调度安全分析实际应用加密算法 第一章&#xff1a;引言 1. 加密算法的基本概念和应用 加密算法是一种通过对数据进行转换…

解决Keil V5.38 和 ST-Link V3 Debug不能运行问题

目录 概述 1 问题描述 1.1 情况一 1.2 情况二 1.3 情况三 2 解决方法 2.1 认识Keil Mico Lib 2.2 使能Keil Mico Lib 3 验证 3.1 进入C程序Main验证 3.2 断点验证 3.3 上电重启验证 4 结论 笔者使用的验证代码下载地址&#xff1a; stm32-freeRTOS-queue资源-CSD…

17.C++常用的算法_集合算法

文章目录 遍历算法1. set_intersection()代码工程运行结果 2. set_union()代码工程运行结果 3. set_difference()代码工程运行结果 遍历算法 1. set_intersection() 代码工程 /*1.求交集的两个集合必须是有序序列*/ /*2.目标容器开辟空间需要从两个容器中取较小值*/ /*3.set…

90年代女神返港行李失踪 怒斥国泰航空

现年51岁的童爱玲在1993年拍摄电影《火蝴蝶》入行&#xff0c;外形出众的她当年曾与梁朝伟、黎明等男神合作&#xff0c;因而被封为「男神磁石」。虽然童爱玲与台湾富商王敦民结婚诞下一子后&#xff0c;便淡出演艺圈&#xff0c;但她曾在2022年复出拍摄ViuTV剧集《季前赛》&am…

chatgpt免费使用网站

在人工智能的浪潮中&#xff0c;OpenAI的ChatGPT作为一款前沿的语言处理工具&#xff0c;已经引起了广泛的关注和讨论。 ChatGPT以其卓越的语言理解和生成能力&#xff0c;为用户提供了多样化的应用场景&#xff0c;从日常对话、编程辅助到内容创作等。然而&#xff0c;对于许…

PSO-BP和BP多输入多输出回归预测模型 matlab (多输入多输出)

文章目录 效果一览文章概述订阅专栏只能获取一份代码部分源码参考资料效果一览 文章概述 PSO-BP和BP多输入多输出回归预测模型 matlab (多输入多输出) 订阅专栏只能获取一份代码 部分源码 %------

小程序中使用HTTPS调用自带文本安全内容检测接口(msg_sec_check)的实现方法

在小程序中调用自带的文本安全内容检测接口&#xff0c;你需要使用小程序提供的wx.request方法。以下是一个示例代码&#xff1a; javascript代码: // 假设你已经获取了access_token,如果不知道如何获取&#xff0c;可以参考我上一篇文章 const access_token 你的access_tok…

FlinkCDC基础篇章2-数据源 SqlServerCDC写入到ES中

接着 上期FlinkCDC基础篇章1-安装使用 下载 Flink 和所需要的依赖包 # 下载 Flink 1.17.0 并将其解压至目录 flink-1.17.0 下载下面列出的依赖包&#xff0c;并将它们放到目录 flink-1.17.0/lib/ 下&#xff1a; 下载链接只对已发布的版本有效, SNAPSHOT 版本需要本地编译 …

云原生Kubernetes: K8S 1.29版本 部署Jenkins

目录 一、实验 1.环境 2.K8S 1.29版本 部署Jenkins 服务 3.jenkins安装Kubernetes插件 二、问题 1.创建pod失败 2.journalctl如何查看日志信息 2.容器内如何查询jenkins初始密码 3.jenkins离线安装中文包报错 4.jenkins插件报错 一、实验 1.环境 &#xff08;1&…

微服务使用SockJs+Stomp实现Websocket 前后端实例 | Vuex形式断开重连、跨域等等问题踩坑(一)

大家好&#xff0c;我是程序员大猩猩。 之前几篇文章&#xff0c;我们讲了Spring Cloud Gateway的轻量级实现&#xff0c;Nginx的配置概念与实现&#xff0c;如以下往期文章。 轻量级的Spring Cloud Gateway实践&#xff0c;实现api和websocket转发轻松实现Nginx的HTTP与WebS…