form表单传参，跳转页面的数据不更新，但是console台是能够输出更新的数据的QAQ还有日期选择器自动弹出之后默认是当天日期，但是如果不滑动一下自己选择而是弹出之后直接点确认就传不过去值……这方面第一次接触，小白求助原因和解决方法！！
输入页面index.vue代码
<template>
<view>
<cu-custom bgColor="bg-red" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">员工打卡记录查询</block>
</cu-custom>
<form @submit="formSubmit" @reset="formReset">
<view class="margin-top">
<view class="cu-form-group">
<view class="title">姓名</view>
<input placeholder="请输入你的姓名" name="name" type="text" disabled="true" :value="name"></input>
</view>
<view class="cu-form-group">
<view class="title">工号</view>
<input placeholder="请输入你的工号" name="number" type="text" disabled="true" :value="number"></input>
</view>
<view class="cu-form-group">
<view class="title">查询班次</view>
<picker @change="pickerChange" :value="index" :range="picker" name="duty">
<view class="picker">
{{index>-1?picker[index]:'选择查询班次'}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">开始日期</view>
<picker mode="date" :value="date1" name="startDate" @change="DateChange1">
<view class="picker">
{{date1}}
</view>
</picker>
</view>
<view class="cu-form-group">
<view class="title">截止日期</view>
<picker mode="date" :value="date2" name="endDate" @change="DateChange2">
<view class="picker">
{{date2}}
</view>
</picker>
</view>
<view class="padding flex flex-direction">
<button class="cu-btn bg-grey lg" form-type="reset">重置</button>
<button class="cu-btn bg-red margin-tb-sm lg" form-type="submit">查询</button>
</view>
</view>
</form>
</view>
</template>
<script>
var num='03124522';
var usrName='test';
export default {
data() {
return {
picker: ['上班', '下班'],
index: -1,
date1: "请选择",
date2: "请选择",
name: usrName,
number: num,
}
},
methods: {
pickerChange(e) {
this.index = e.detail.value
},
DateChange1(e) {
this.date1 = e.detail.value
},
DateChange2(e) {
this.date2 = e.detail.value
},
formSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
var formdata = e.detail.value;
uni.navigateTo({
url: encodeURI('./new_file?name=' + usrName + '&number=' + num + '&duty=' + formdata.duty+'&startDate='+formdata.startDate+'&endDate='+formdata.endDate)
})
},
formReset: function(e) {
console.log('清空数据')
},
}
}
</script>
跳转页代码
<template>
<div id="table">
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width='50px'>工号</th>
<th width='50px'>姓名</th>
<th width='30px'>班次</th>
<th>查询时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{number}}</td>
<td>{{name}}</td>
<td v-if="duty=0">上班</td>
<td else-if="duty=1">下班</td>
<td>{{start}} - {{end}}</td>
</tr>
</tbody>
</table>
<div class="add">
<br>
<navigator open-type="navigate" url="index">
<button>返回</button>
</navigator>
</div>
<br>
</div>
</template>
<script>
var name;
var number;
var duty;
var startTime;
var endTime
export default {
name: "tables1",
data() {
return {
name:name,
number:number,
duty:duty,
start:startTime,
end:endTime,
}
},
onLoad: function(options) {
name = options.name;
number = options.number;
duty = options.duty;
startTime=options.startDate;
endTime=options.endDate;
},
}
</script>
