需求: 输入连号事件,需要在表格中输入物流单号,物流号码,生成的数量,名称,点击确定自动生成固定数量的连号物流单号
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>
定义变量:
javascript
const tableData = reactive([])//生成之后的table表格
const tableDataDialog = ref([])//弹出层的表格
const showDialog = ref(false)//控制弹出层显隐
点击输入连号自动先插入一条空数据,用于输入相应地内容
javascript
const handleDialog = ()=>{
showDialog.value = true
let obj = {
code: '',
no: '',
name: '',
num: ''
}
tableDataDialog.value.push(obj)
}
点击保存时,将弹出层输入的单号,号码,和数量进行数据组装,然后放入到tableData中,关闭弹出层
javascript
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
}
})
}