vue动态生成行

vue代码

<el-table :data="form.lineInfos" :border=true style="width: 99.99%;">

                    <el-table-column type="index" label="序号" width="50"></el-table-column>

                    <el-table-column prop="unitPrice" label="单价" width="150">

                        <template slot-scope="scope">

                            <el-input-number v-model="scope.row.unitPrice" controls-position="right"  

                            :min="1" :precision="2" :max="999999" size="small"

                            @blur="unitPriceInput($event)"></el-input-number>

                        </template>

                    </el-table-column>

                    <el-table-column prop="deliverCharge" label="送货费" width="150">

                        <template slot-scope="scope">

                            <el-input-number v-model="scope.row.deliverCharge" controls-position="right"  

                            :min="1" :precision="2" :max="999999" size="small"></el-input-number>

                        </template>

                    </el-table-column>

                    <el-table-column prop="landingCharge" label="卸货费" width="150">

                        <template slot-scope="scope">

                            <el-input-number v-model="scope.row.landingCharge" controls-position="right"  

                            :min="1" :precision="2" :max="999999" size="small"></el-input-number>

                        </template>

                    </el-table-column>

                    <el-table-column prop="totalPrice" label="总价" width="150">

                        <template slot-scope="scope">

                        <el-input v-model="scope.row.totalPrice" id="totalPrice" size="small" placeholder="请输入" />

                        </template>    

                    </el-table-column>

                    <el-table-column prop="startRoute" label="起始线路" width="350">

                        <template slot-scope="scope">

                            <el-input v-model="scope.row.startRoute"   placeholder="请输入终点线路" />

                        </template>

                    </el-table-column>

                    <el-table-column prop="endRoute" label="终点线路" width="350">

                        <template slot-scope="scope">

                            <el-input v-model="scope.row.endRoute"   placeholder="请输入终点线路" />

                        </template>

                       

                    </el-table-column>

                    <el-table-column label="操作" width="100">

                        <template slot-scope="scope">

                            <el-button size="mini" type="danger" plain @click="removeLineInfos(scope.$index, scope.row)">删除</el-button>

                        </template>

                    </el-table-column>

                </el-table>

js代码

export default {

    name: "LineEdit",

    data() {

        return {

                

                form: {

                        lineInfos: [{

                            value: ''

                        }],

            }

                }

            }

        

// 动态删除行

        removeLineInfos(index, row){

            var that = this;

            this.$confirm('确认删除吗?', '提示', {

            confirmButtonText: '确定',

            cancelButtonText: '取消',

            type: 'warning'

            }).then(() => {

                //点击确定的操作(调用接口)

                var lineInfos = that.form.lineInfos;

                for (var i = 0; i < lineInfos.length; i++) {

                    if (row.id == lineInfos[i].id) {

                        that.form.lineInfos.splice(i, 1);

                    }

                }

                }).catch(() => {

                //点取消的提示

                    return;

                });

        },

        // 动态增加行

        addLineInfos(){

            var member = this.form.lineInfos;

            console.log(member);

            var length = member.length;

            this.form.lineInfos.push(

            {

                id: parseInt(length),

                name: '',

                relationship: '',

                mobile: '',

                birthday: '',

                gongzuodanwei: '',

            });

        },

}   

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/32115.shtml

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

相关文章

golang协程池(goroutine池)ants库实践

golang中goroutine由运行时管理&#xff0c;使用go关键字就可以方便快捷的创建一个goroutine,受限于服务器硬件内存大小&#xff0c;如果不对goroutine数量进行限制&#xff0c;会出现Out of Memory错误。但是goroutine泄漏引发的血案&#xff0c;想必各位gopher都经历过&#…

在Qt中使用LoadLibrary无法加载DLL

Qt系列文章目录 文章目录 Qt系列文章目录前言一、问题分析 前言 最近因项目需要使用qt做开发&#xff0c;之前使用LoadLibrary加载dll成功&#xff0c;很庆幸&#xff0c;当一切都那么顺风顺水的时候&#xff0c;测试同事却发现&#xff0c;在windows平台上个别电脑上加载dll会…

Redis BitMap/HyperLogLog/GEO/布隆过滤器案例

面试问题&#xff1a; 抖音电商直播&#xff0c;主播介绍的商品有评论&#xff0c;1个商品对应了1系列的评论&#xff0c;排序展现取前10条记录用户在手机App上的签到打卡信息&#xff1a;1天对应1系列用户的签到记录&#xff0c;新浪微博、钉钉打卡签到&#xff0c;来没来如何…

【Grafana】中文界面配置 v10.0.3

比如通过 docker run -d -p 3000:3000 -v /e/code/monitor/grafana/grafana.ini.txt:/etc/grafana/grafana.ini grafana/grafana运行一个容器&#xff08;最新是v10.0.3&#xff09;。 在 /admin/settings 可以看到 users 部分有一个 default_language 配置。 所以在挂载到 …

php代码审计,php漏洞详解

文章目录 1、输入验证和输出显示2、命令注入(Command Injection)3、eval 注入(Eval Injection)4、跨网站脚本攻击(Cross Site Scripting, XSS)5、SQL 注入攻击(SQL injection)6、跨网站请求伪造攻击(Cross Site Request Forgeries, CSRF)7、Session 会话劫持(Session Hijacking…

自动化实践-全量Json对比在技改需求提效实践

1 背景 随着自动化测试左移实践深入&#xff0c;越来越多不同类型的需求开始用自动化测试左移来实践&#xff0c;在实践的过程中也有了新的提效诉求&#xff0c;比如技改类的服务拆分项目或者BC流量拆分的项目&#xff0c;在实践过程中&#xff0c;这类需求会期望不同染色环境…

SpringCloud源码探析(九)- Sentinel概念及使用

1.概述 在微服务的依赖调用中&#xff0c;若被调用方出现故障&#xff0c;出于自我保护的目的&#xff0c;调用方会主动停止调用&#xff0c;并根据业务需要进行对应处理&#xff0c;这种方式叫做熔断&#xff0c;是微服务的一种保护方式。为了保证服务的高可用性&#xff0c;…

rknn3588如何查看npu使用情况

cat /sys/kernel/debug/rknpu/load

windows环境下编译OpenJDK12

环境&#xff1a;Windows11 目录&#xff1a; 1、下载OpenJDK12源码 下载地址&#xff1a; https://hg.openjdk.org/jdk/jdk12 点击zip下载到本地。 解压到本地。 Tip&#xff1a;注意本地路径中最好不要包含中文或空格。 2、阅读一遍doc/building.html 如果只是想构建J…

白帽黑帽与linux安全操作

目录 白帽黑帽 Linux安全 白帽黑帽 白帽&#xff08;White Hat&#xff09;和黑帽&#xff08;Black Hat&#xff09;通常用于描述计算机安全领域中的两种不同角色。白帽黑客通常被认为是合法的安全专家&#xff0c;他们通过合法途径寻找和修复安全漏洞&#xff0c;帮助企业和…

Linux/centos上如何配置管理samba服务器?

Linux/centos上如何配置管理samba服务器&#xff1f; 1 samba服务相关知识1.1 SMB协议1.2 samba工作原理1.2.1 相关进程1.2.2 samba工作流程1.2.3 samba功能 2 samba服务器安装2.1 利用光驱安装2.2 利用光盘映射文件 3 启动与停止samba服务4 配置samba服务器4.1 samba主配置文件…

解读百威亚太2023上半年财报:啤酒大年百威如何重塑高端化之路?

随着消费者的需求提升&#xff0c;啤酒行业向高端化发展&#xff0c;其中知名度较高的百威亚太、华润啤酒、青岛啤酒、燕京啤酒、嘉士伯等品牌在高端市场持续鏖战&#xff0c;实际成果如何也可以从业绩一探究竟。 以百威亚太为例。8月3日&#xff0c;百威亚太发布2023年上半年…

记录一次electron打包提示文件找不到的解决方法

没有配置files选项 files的作用是配置打包到应用程序的构建资源 就是说如果你想使用项目那个目录下的文件 就得通过files配置一下不然就会报错 json文件或者yml文件会报的错 格式是这样的 "files": ["dist-electron", "dist"],electron打包配…

【C++学习】STL容器——list

目录 一、list的介绍及使用 1.1 list的介绍 1.2 list的使用 1.2.1 list的构造 1.2.2 list iterator的使用 1.2.3 list capacity 1.2.4 list element access 1.2.5 list modifiers 1.2.6 list 迭代器失效 二、list的模拟实现 2.1 模拟实现list 三、list和vector的对比…

【算法挨揍日记】day01——双指针算法_移动零、 复写零

283.移动零 283. 移动零https://leetcode.cn/problems/move-zeroes/ 题目&#xff1a; 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 …

生信豆芽菜-火山图绘制使用说明

网站&#xff1a;http://www.sxdyc.com/visualsVolcano 一、火山图简介 火山图是散点图的一种&#xff0c;它将统计测试中的统计显著性量度&#xff08;如p value&#xff09;和变化幅度&#xff08;logFC&#xff09;相结合&#xff0c;能够快速直观地识别那些变化幅度较大且具…

13个Python最佳编程技巧,越早知道越好

每天我们都会面临许多需要高级编码的编程挑战。你不能用简单的 Python 基本语法来解决这些问题。在本文中&#xff0c;我将分享 13 个高级 Python 脚本&#xff0c;它们可以成为你项目中的便捷工具。如果你目前还用不到这些脚本&#xff0c;你可以先添加收藏&#xff0c;以备留…

springMVC 程序开发

目录 一. 认识 springMVC spring&#xff0c;springBoot&#xff0c;springMVC的关系 二. springMVC 的连接和获取参数 1. 注解分析&#xff08;不带参数&#xff09; 2. 获取参数 3. 获取对象参数 4. 重命名功能 5. 获取 JSON 对象 6. 通过 path 文件路径来传递参数…

新版Android Studio模拟器浮动

&#xff08;水一篇&#xff0c;但其实很多入门同学不知道&#xff09; 安装新版Andorid Studio后会发现模拟器是内嵌在AS中的&#xff0c;如何让她浮动

[C++项目] Boost文档 站内搜索引擎(4): 搜索的相关接口的实现、线程安全的单例index接口、cppjieba分词库的使用、综合调试...

有关Boost文档搜索引擎的项目的前三篇文章, 已经分别介绍分析了: 项目背景: &#x1fae6;[C项目] Boost文档 站内搜索引擎(1): 项目背景介绍、相关技术栈、相关概念介绍…文档解析、处理模块parser的实现: &#x1fae6;[C项目] Boost文档 站内搜索引擎(2): 文档文本解析模块…