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.rhkb.cn/news/82796.html

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

相关文章

Swagger技术-自动生成测试接口

简介 前端资源和后端资源分开&#xff0c;前端通过nginx运行&#xff0c;后端通过tomcat运行 前端技术框架&#xff1a; Swagger 作用&#xff1a;生成各种样式的接口文档&#xff0c;以及在线接口调试页面等 kinfe4j是基于mvc框架继承swagger生成api文档的增强解决方案 …

【云原生】Docker-compose中所有模块学习

compose模块 模板文件是使用 Compose 的核心&#xff0c;涉及到的指令关键字也比较多。但大家不用担心&#xff0c;这里面大部分指令跟 docker run 相关参数的含义都是类似的。 默认的模板文件名称为 docker-compose.yml&#xff0c;格式为 YAML 格式。 version: "3&quo…

Nios初体验之——Hello world!

文章目录 前言一、系统设计1、系统模块框图2、系统涉及到的模块1、时钟2、nios2_qsys3、片内存储&#xff08;onchip_rom、onchip_ram&#xff09;4、串行通信&#xff08;jtag_uart&#xff09;5、System ID&#xff08;sysid_qsys&#xff09; 二、硬件设计1、创建Qsys2、重命…

网络安全 Day27-运维安全项目-堡垒机部署

运维安全项目-堡垒机部署 1. 运维安全项目-架构概述2. 运维安全项目之堡垒机2.1 堡垒机概述2.2 堡垒机选型2.3 环境准备2.4 部署Teleport堡垒机2.4.1 下载与部署2.4.2 启动2.4.3 浏览器访问teleport2.4.4 进行配置2.4.5 安装teleport客户端 2.5 teleport连接服务器 1. 运维安全…

opencv基础48-绘制图像轮廓并切割示例-cv2.drawContours()

绘制图像轮廓&#xff1a;drawContours函数 在 OpenCV 中&#xff0c;可以使用函数 cv2.drawContours()绘制图像轮廓。该函数的语法格式是&#xff1a; imagecv2.drawContours( image, contours, contourIdx, color[, thickness[, lineType[, hierarchy[, maxLevel[, offset]]…

openGauss学习笔记-31 openGauss 高级数据管理-索引

文章目录 openGauss学习笔记-31 openGauss 高级数据管理-索引31.1 语法格式31.2 参数说明31.3 示例 openGauss学习笔记-31 openGauss 高级数据管理-索引 索引是一个指向表中数据的指针。一个数据库中的索引与一本书的索引目录是非常相似的。 索引可以用来提高数据库查询性能&…

2023河南萌新联赛第(五)场:郑州轻工业大学 --Kruskal

题目描述 给定一张nnn个点的无向完全图&#xff0c;其中两点之间的路径边权为两点编号的按位与&#xff08;编号为 (1,2,...,n)(1,2,...,n)(1,2,...,n)&#xff09;&#xff0c;即w(u,v)u&v(1≤u,v≤n)w\left(u, v \right )u\&v \left( 1 \le u, v \le n \right)w(u,v…

CSS:盒子模型 与 多种横向布局方法

目录 盒子模型块级盒子内联级盒子内联块级盒子弹性盒子display 改变模型区域划分text 内容区padding 填充区border 边框区margin 外边距直接设置盒子大小 布局横向布局方法一 float 浮起来方法二 内联块级元素实现方法三 弹性盒子模型 盒子模型 块级盒子 独占一行&#xff0c…

layui的基本使用-日期控件的业务场景使用入门实战案例一

效果镇楼; 1 前端UI层面; <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" conten…

【前端】html

HTML标签&#xff08;上&#xff09; 目标&#xff1a; -能够说出标签的书写注意规范 -能够写出HTML骨架标签 -能够写出超链接标签 -能够写出图片标签并说出alt和title的区别 -能够说出相对路径的三种形式 目录&#xff1a; HTML语法规范HTML基本结构标签开发工具HTML常用标…

Android SystemServer中Service的创建和启动方式(基于Android13)

Android SystemServer创建和启动方式(基于Android13) SystemServer 简介 Android System Server是Android框架的核心组件&#xff0c;运行在system_server进程中&#xff0c;拥有system权限。它在Android系统中扮演重要角色&#xff0c;提供服务管理和通信。 system …

浅析 C 语言的共用体、枚举和位域

前言 最近在尝试阅读一些系统库的源码&#xff0c;但是其中存在很多让我感到既熟悉又陌生的语法。经过资料查阅&#xff0c;发现是 C 语言中的共用体和位域。于是&#xff0c;趁着课本还没有扔掉&#xff0c;将一些相关的知识点记录在本文。 文章目录 前言共用体 (union)枚举…

zookeeper常用命令

zookeeper常用命令 1. 下载安装2. 配置说明2.1 配置 3. zookeeper的常见命令3.1 server端启动停止等命令3.2 客户端连接等命令3.3 客户端简单常用命令3.3.1 查看目录&#xff08;查看数据结构&#xff09;3.3.2 删除目录3.3.3 创建目录3.3.4 创建目录并写入值 查看节点值3.3.5…

原型链污染,nodejs逃逸例子

文章目录 原型链污染原型链污染原理原型链污染小例子 原型链污染题目解析第一题第二题 Nodejs沙箱逃逸方法一方法二 原型链污染 原型链污染原理 原型链 function test(){this.a test; } b new test;可以看到b在实例化为test对象以后&#xff0c;就可以输出test类中的属性a…

【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio构建SpringSecurity权限框架

1.Cloud Studio&#xff08;云端 IDE&#xff09;简介 Cloud Studio 是基于浏览器的集成式开发环境&#xff08;IDE&#xff09;&#xff0c;为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装&#xff0c;随时随地打开浏览器就能在线编程。 Clou…

XSS漏洞原理及利用跨站请求伪造CSRF

XSS漏洞原理及利用&跨站请求伪造CSRF XSS一、案例二、什么是XSS三、XSS危害四、XSS的分类4.1、反射型XSS4.1.1、介绍4.1.2、利用过程 4.2、存储型XSS4.2.1、介绍4.2.2、利用过程4.2.3、案例 4.3、DOM型XSS4.3.1、介绍4.3.2、常用的DOM方法4.3.3、案例4.3.3.1、代码分析4.3.…

如何快速完成MySQL数据的差异对比|NineData

在现代商业环境中&#xff0c;数据库是企业存储核心数据的重要工具&#xff0c;而 MySQL 作为最受欢迎的关系型数据库管理系统&#xff0c;广泛应用于各行各业。在容灾、数据迁移、备份恢复等场景下&#xff0c;为了确保两端或多端之间数据的一致性&#xff0c;通常需要对数据进…

Android 实现 RecyclerView下拉刷新,SwipeRefreshLayout上拉加载

上拉、下拉的效果图如下&#xff1a; 使用步骤 1、在清单文件中添加依赖 implementation ‘com.android.support:recyclerview-v7:27.1.1’ implementation “androidx.swiperefreshlayout:swiperefreshlayout:1.0.0” 2、main布局 <LinearLayout xmlns:android"http…

渐进式云渲染和模块式云渲染:二者的区别与选择

云渲染是一种利用云计算技术&#xff0c;将本地的渲染任务分配到远程的服务器上进行高效、快速、低成本的渲染的服务。云渲染可以帮助用户节省时间、资金和硬件资源&#xff0c;提高工作效率和质量。但是&#xff0c;在使用云渲染时&#xff0c;用户需要面对一个重要的选择&…

SpringBoot 底层机制分析[上]

文章目录 分析SpringBoot 底层机制【Tomcat 启动分析Spring 容器初始化Tomcat 如何关联Spring 容器】[上]搭建SpringBoot 底层机制开发环境Configuration Bean 会发生什么&#xff0c;并分析机制提出问题&#xff1a;SpringBoot 是怎么启动Tomcat &#xff0c;并可以支持访问C…