快捷導(dǎo)航

vue3輸入單號和張數(shù)如何自動生成連號的單號

更新時(shí)間：2024年02月29日 10:49:32 作者：小端-吃瓜

最近遇到這樣的需求輸入連號事件,需要在表格中輸入物流單號,物流號碼,生成的數(shù)量,名稱,點(diǎn)擊確定自動生成固定數(shù)量的連號物流單號,本文重點(diǎn)介紹vue3輸入單號和張數(shù),自動生成連號的單號,感興趣的朋友一起看看吧

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="張數(shù)">
				<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)//控制彈出層顯隱

點(diǎn)擊輸入連號自動先插入一條空數(shù)據(jù)，用于輸入相應(yīng)地內(nèi)容

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

點(diǎn)擊保存時(shí)，將彈出層輸入的單號，號碼，和數(shù)量進(jìn)行數(shù)據(jù)組裝，然后放入到tableData中，關(guān)閉彈出層

const save = ()=>{
		let length = tableDataDialog.value.length
		let size = new Set(tableDataDialog.value.map(item=>item.code)).size
		if(size !== length){
			ElMessage('物流號碼不能重復(fù)')
			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前綴的號碼，自動生成要做補(bǔ)0操作，不然會把0自動去掉
					noLen++
				}
			}
			tableData.push(obj)
			showDialog.value = false
		}
	})
}

到此這篇關(guān)于vue3輸入單號和張數(shù)，自動生成連號的單號的文章就介紹到這了,更多相關(guān)vue自動生成連號的單號內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: