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 配置。 所以在挂载到 …

速看!Milvus JavaScript 客户端入门级使用指南

Milvus 是一款云原生的开源向量数据库&#xff0c;专为向量相似性搜索和 AI 应用赋能。Milvus 支持水平扩展&#xff0c;可以处理海量数据&#xff0c;同时&#xff0c;Milvus 还提供多语言的 SDK &#xff08;包括 JavaScript&#xff09;。 使用 Milvus node.js SDK&#xff…

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…

vue 后端返回文件流,前端导出下载

vue 后端返回文件流&#xff0c;前端导出下载 配置axios响应拦截器 request.interceptors.response.use((response) > {const res response.data// 关键代码: 返回的是文件流if (res instanceof Blob) {return response}if (res.code 200 || res true) {return res} el…

Python使用OpenAI 和大型语言模型对话PDF和图像文本

本文首先介绍文件文本嵌入方法及代码实现&#xff0c;然后介绍和代码实现提取PDF和图像文本应用于大型语言模型。在此基础上&#xff0c;构建回答任何问题的人工智能助手。 创建文本嵌入 文本嵌入是自然语言处理&#xff08;NLP&#xff09;领域的重要工具。它们是文本的数字…

线性代数复习公式整理(自用/持续更新)

第一章 行列式 设A、B为n阶矩阵 ∣ A T ∣ ∣ A ∣ \left | A^T \right | \left | A \right | ​AT ​∣A∣ ∣ A m ∣ ∣ A ∣ m \left | A^m \right | \left | A \right | ^m ∣Am∣∣A∣m ∣ k A ∣ k n ∣ A ∣ \left | kA \right | k^n\left | A \right | ∣kA∣kn∣A…

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

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

【BASH】回顾与知识点梳理(十九)

【BASH】回顾与知识点梳理 十九 十九. 循环 (loop)19.1 while do done, until do done (不定循环)19.2 for...do...done (固定循环)19.3 for...do...done 的数值处理(C写法)19.4 搭配随机数与数组的实验19.5 shell script 的追踪与 debug19.6 what_to_eat-2.sh debug结果解析 该…

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

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

即然利用反射机制可以破坏单例模式,有什么方法避免呢?

私有构造方法中添加防止多次实例化的逻辑&#xff1a;在单例类的私有构造方法中&#xff0c;可以添加逻辑来检查是否已经存在实例&#xff0c;如果存在则抛出异常或返回已有的实例。这样即使通过反射创建了新的实例&#xff0c;也能在构造方法中进行拦截。 使用枚举实现单例&a…

rknn3588如何查看npu使用情况

cat /sys/kernel/debug/rknpu/load

choices参数的使用、MTV和MVC的概念、对多的三种创建方式、Ajax技术

一、choices参数的使用 choices它是ORM中常用字段中的参数choices的作用&#xff1a;类似于一些字段&#xff1a;性别、学历、客户来源、是否上学、是否结婚等字段# 针对于一些字段它的情况能够被列举完&#xff0c;像这样的字段&#xff0c;我们在表中存储的时候一般使用choi…

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打包配…