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: '',
});
},
}

相关文章:
vue动态生成行
vue代码 <el-table :data"form.lineInfos" :bordertrue style"width: 99.99%;"> <el-table-column type"index" label"序号" width"50"></el-table-column> <el-table-column prop"unitPrice&qu…...
IPC之一:使用匿名管道进行父子进程间通信的例子
IPC 是 Linux 编程中一个重要的概念,IPC 有多种方式,本文主要介绍匿名管道(又称管道、半双工管道),尽管很多人在编程中使用过管道,但一些特殊的用法还是鲜有文章涉及,本文给出了多个具体的实例,每个实例均附…...
前端将页面转化为图片---进行下载导出、打印等功能
1.需要实现一个将div页面的东西导出,使用到了html2canvas 官网: 配置型 | HTML2CANVAS 中文文档 (allenchinese.github.io) 2.下载html2canvas npm install --save html2canvas 3.导入使用到的页面 import html2canvas from html2canvas 4.创建图片基础应用 …...
docker安装code-service在线开发vscode工具及node版本过低问题
docker安装code-service 拉去镜像 docker pull codercom/code-server创建项目存放映射路径 mkdir /data/code-service/project运行 这里不唯一,但注意密码 docker run -itd --name code-service -u root -p 1024:8080 -v /data/code-service/project:/home/cod…...
C++ 多态深入解析
文章目录 前言一、什么是多态二、如何实现多态三、代码讲解四、静态联编,动态联编总结 前言 在C编程中,多态性(Polymorphism)是一种重要的概念,它允许基于对象的实际类型来调用不同的函数。多态性提供了灵活性和可扩展…...
C#使用EmguCV播放视频
目录 一、前言 1、简介 2、测试工程代码下载链接 3、EmguCV 库文件下载链接 二、工程环境配置 1、EmguCV控件添加引用 (1)窗口控件添加 (2)相关Dll文件添加添加引用 (3)工程运行基础文件夹添加 &a…...
LeetCode150道面试经典题-买卖股票的最佳时机(简单)
1、题目 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票,并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔交易中获取的…...
【积水成渊】CSS磨砂玻璃效果和渐变主题色文字
大家好,我是csdn的博主:lqj_本人 lqj_本人_python人工智能视觉(opencv)从入门到实战,前端,微信小程序-CSDN博客 最新的uniapp毕业设计专栏也放在下方了: https://blog.csdn.net/lbcyllqj/category_12346639.html?spm1…...
JVM、JRE、JDK三者之间的关系
JVM、JRE和JDK是与Java开发和运行相关的三个重要概念。 再了解三者之前让我们先来了解下java源文件的执行顺序: 使用编辑器或IDE(集成开发环境)编写Java源文件.即demo.java程序必须编译为字节码文件,javac(Java编译器)编译源文件为demo.class文件.类文…...
input 标签的 type 属性有哪些值?分别表示什么意思?
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ type值以及作用⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端…...
(十五)大数据实战——hive的安装部署
前言 Hive是由Facebook开源,基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张表,并提供类SQL查询功能。本节内容我们主要介绍一下hive的安装与部署的相关内容。 正文 上传hive安装包到hadoop101服务器/opt/software目录 解…...
MySQL安装和卸载
1.MySQL概述 MySQL概述 MySQL是一个[关系型数据库管理系统],由瑞典MySQL AB 公司开发,2008年被sun公司收购, 2009sun又被oracle收购,所以属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用…...
ELK、ELFK日志分析系统
菜单一、ELK简介1.1 ELK组件说明1.1.1 ElasticSearch1.1.2 Kiabana1.1.3 Logstash 1.2 可以添加的其它组件1.2.1 Filebeat1.2.2 缓存/消息队列(redis、kafka、RabbitMQ等)1.2.3 Fluentd 1.3 为什么要用ELK1.4 完整日志系统的基本特征1.5 ELK 的工作原理 …...
JVM基础篇-StringTable
StringTable 特性 常量池中的字符串仅是符号,第一次用到时才变为对象 利用串池的机制,来避免重复创建字符串对象 字符串变量拼接的原理是 StringBuilder (1.8) 字符串常量拼接的原理是编译期优化 可以使用 intern 方法&#…...
探秘手机隐藏的望远镜功能:开启后,观察任何你想看的地方
当今的智能手机不仅仅是通信工具,它们蕴藏着各种隐藏的功能,其中之一就是让你拥有望远镜般的观察能力。是的,你没有听错!今天我们将探秘手机中隐藏的望远镜功能,这项神奇的功能可以让你打开后,轻松观察任何…...
正运动亮相2023半导体设备材料与核心部件展示会,助力半导体产业高速高精应用
■展会名称: 第11届(2023)半导体设备材料与核心部件展示会 ■展会日期 2023年8月9日-11日 ■展馆地点 无锡太湖国际博览中心A6馆 ■展位号 A6-A361 正运动技术,作为国内领先的运动控制企业,将于2023年8月9日参加…...
如何在MongoDB中添加新用户
如何在MongoDB中添加新用户? MongoDB是一款流行的NoSQL数据库,它的可扩展性强,可进行分布式部署,且具有高可用性。其许多优势使得越来越多的企业和组织选择MongoDB作为其数据库系统。本文将介绍如何在MongoDB中添加新用户。 第一步…...
幻读怎么复现
大家好,我是想想。 很久没有给大家分享技术了,主要在计划一些事情,几乎没什么时间爽文了。 今天从实操上实现了MySQL事务隔离复现问题,就记录分享给大家吧。 正文 我们知道,著名的四大事务特性ACID特性 Atomicity…...
无脑入门pytorch系列(二)—— torch.mean
本系列教程适用于没有任何pytorch的同学(简单的python语法还是要的),从代码的表层出发挖掘代码的深层含义,理解具体的意思和内涵。pytorch的很多函数看着非常简单,但是其中包含了很多内容,不了解其中的意思…...
ansible-kubeadm在线安装高可用K8S集群v1.19-v1.20版本
ansible可以安装的KS8版本如下: 请按照此博客中的内容操作后,才可以通过下面的命令查询到版本。 [rootk8s-master01 ~]# yum list kubectl --showduplicates | sort -r kubectl.x86_64 1.20.0-0 kubern…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...
【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...
C++:多态机制详解
目录 一. 多态的概念 1.静态多态(编译时多态) 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1).协变 2).析构函数的重写 5.override 和 final关键字 1&#…...
【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险
C#入门系列【类的基本概念】:开启编程世界的奇妙冒险 嘿,各位编程小白探险家!欢迎来到 C# 的奇幻大陆!今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类!别害怕,跟着我,保准让你轻松搞…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
Python实现简单音频数据压缩与解压算法
Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中,压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言,提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...
