vue3输入单号和张数如何自动生成连号的单号

 更新时间:2024年02月29日 10:49:32   作者:小端-吃瓜  
最近遇到这样的需求输入连号事件,需要在表格中输入物流单号,物流号码,生成的数量,名称,点击确定自动生成固定数量的连号物流单号,本文重点介绍vue3输入单号和张数,自动生成连号的单号,感兴趣的朋友一起看看吧

需求: 输入连号事件,需要在表格中输入物流单号,物流号码,生成的数量,名称,点击确定自动生成固定数量的连号物流单号

1.页面布局

<div><el-button type="primary" size="default" @click="handleDialog">输入连号</el-button></div>
	<br/><br/>
	<el-table
	  :data="tableData"
	  style="width: 80vw; margin-bottom: 20px"
	  border
	>
		<el-table-column prop="code" label="快递代码" width="200"></el-table-column>
		<el-table-column prop="no" label="快递单号"></el-table-column>
		<el-table-column prop="name" label="名称"></el-table-column>
		<!-- <el-table-column prop="optes" label="操作"></el-table-column> -->
	</el-table>

弹出层代码:

<el-dialog v-model="showDialog">
		<el-table
		  :data="tableDataDialog"
		  style="width: 80vw; margin-bottom: 20px"
		  border
		>
			<el-table-column prop="code" label="快递代码" width="200">
				<template #default="{row}">
					<el-input v-model="row.code" maxlength="10">
					</el-input>
				</template>
			</el-table-column>
			<el-table-column prop="no" label="快递单号">
				<template #default="{row}">
					<el-input v-model="row.no" maxlength="8">
					</el-input>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="名称">
				<template #default="{row}">
					<el-input v-model="row.name">
					</el-input>
				</template>
			</el-table-column>
			<el-table-column prop="num" label="张数">
				<template #default="{row}">
					<el-input v-model="row.num" minlength="1">
					</el-input>
				</template>
			</el-table-column>
		</el-table>
		<el-button type="info" size="default" @click="save">确定</el-button>
	</el-dialog>

定义变量:

const tableData = reactive([])//生成之后的table表格
const tableDataDialog = ref([])//弹出层的表格
const showDialog = ref(false)//控制弹出层显隐

点击输入连号自动先插入一条空数据,用于输入相应地内容

const handleDialog = ()=>{
	showDialog.value = true
	let obj = {
		code: '',
		no: '',
		name: '',
		num: ''
	}
	tableDataDialog.value.push(obj)
}

点击保存时,将弹出层输入的单号,号码,和数量进行数据组装,然后放入到tableData中,关闭弹出层

const save = ()=>{
		let length = tableDataDialog.value.length
		let size = new Set(tableDataDialog.value.map(item=>item.code)).size
		if(size !== length){
			ElMessage('物流号码不能重复')
			return
		}
		let obj = {}
		let len = tableDataDialog.value[0].code.toString().length
	tableData.value = []
	tableDataDialog.value.forEach((item)=>{
		for(var i=0;i<item.num;i++){
			obj = {
				code: item.code,
				no: item.no,
				name: item.name
			}
			item.no++
			item.no = item.no.toString()
			for(var j=0;j<len;j++){
				let noLen = item.no.toString().length
				if(noLen < len){
					item.no = '0' + item.no//如果输入的为带00xx前缀的号码,自动生成要做补0操作,不然会把0自动去掉
					noLen++
				}
			}
			tableData.push(obj)
			showDialog.value = false
		}
	})
}

到此这篇关于vue3输入单号和张数,自动生成连号的单号的文章就介绍到这了,更多相关vue自动生成连号的单号内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中多个文件下载实现打包压缩下载示例

    vue中多个文件下载实现打包压缩下载示例

    这篇文章主要为大家介绍了vue中多个文件下载实现打包压缩下载的发发示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • Vue Cli与BootStrap结合实现表格分页功能

    Vue Cli与BootStrap结合实现表格分页功能

    这篇文章主要介绍了Vue Cli与BootStrap结合实现表格分页功能,需要的朋友可以参考下
    2017-08-08
  • vue2.0 和 animate.css的结合使用

    vue2.0 和 animate.css的结合使用

    animate.css是一款前端动画库,相似的有velocity-animate。这篇文章给大家介绍vue2.0 和 animate.css的结合使用,需要的朋友参考下吧
    2017-12-12
  • 详解在Vue中如何模块化使用Vuex

    详解在Vue中如何模块化使用Vuex

    这篇文章给大家介绍了在Vue 中如何模块化使用 Vuex,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-01-01
  • VUE前端打包到测试环境的解决方法

    VUE前端打包到测试环境的解决方法

    这篇文章主要介绍了若依VUE前端打包到测试环境,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • Vue mixins详解与使用技巧

    Vue mixins详解与使用技巧

    Vue mixins提供了一个非常灵活的方式来分发Vue组件中的可复用功能,通过全局混入和局部混入,可以将预定义的方法、数据等混合到Vue组件中,这种技术可以简化代码,提高开发效率,并允许在不同组件间共享功能
    2024-09-09
  • 浅谈Vue的基本应用

    浅谈Vue的基本应用

    本文主要介绍了Vue的基本应用。具有一定的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • vue-cli2.9.3 详细教程

    vue-cli2.9.3 详细教程

    这篇文章主要介绍了vue-cli2.9.3 详细教程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue+springboot前后端分离实现单点登录跨域问题解决方法

    vue+springboot前后端分离实现单点登录跨域问题解决方法

    这篇文章主要介绍了vue+springboot前后端分离实现单点登录跨域问题的解决方法,需要的朋友可以参考下
    2018-01-01
  • Vue仿支付宝支付功能

    Vue仿支付宝支付功能

    这篇文章主要介绍了Vue仿支付宝支付功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05

最新评论