mint-ui 页面中多个mt-picker动态获取值在初始化自动执行change事件导致的问题及解决方法

场景：
在项目过程中遇到一个页面有多个弹出框需要用到mt-picker，且mt-picker的选项都是动态从接口获取到的。
问题:
具体如下图所示：在页面初始化时需要调用两个接口分别获取同意选项一和不同意选项的可选数据，给mt-picker绑定@change事件，在页面一进来选择快的话是会出现下图所示：选中项和展示出的不是同一值的情况。

原因：在页面初始化的时候@change事件会自动执行，如果在@change内赋值的话，会导致其实没有进行选择时，已经有默认值存在，就可能会出现上图所示情况。

解决方案：不使用自带的@change事件，通过设置showToolbar的值，添加确认按钮，给按钮加事件进行控制，通过ref获取当前选项的值。

部分代码如下：

<mt-popup v-model="nextpart" popup-transition="popup-fade" closeOnClickModal="true" position="bottom"
	style="width: 100%;">
	<mt-picker :slots="slots" value-key="name" style="width: 100%;" showToolbar ref="picker">
		<div
			style="display: flex;flex-direction: row;justify-content: space-around;height: 40px;line-height: 40px;font-size: 16px;">
			<div class="usi-btn-cancel" @click="handlepartFn('cancel','picker')">取消</div>
			<div class="usi-btn-sure" @click="handlepartFn('sure','picker')">确定</div>
		</div>
	</mt-picker>
</mt-popup>
<mt-popup v-model="Officepart" popup-transition="popup-fade" closeOnClickModal="true" position="bottom"
	style="width: 100%;">
	<mt-picker :slots="slots1" value-key="roleName" style="width: 100%;" showToolbar ref="picker1">
		<div
			style="display: flex;flex-direction: row;justify-content: space-around;height: 40px;line-height: 40px;font-size: 16px;">
			<div class="usi-btn-cancel" @click="handlepartFn('cancel','picker1')">取消</div>
			<div class="usi-btn-sure" @click="handlepartFn('sure','picker1')">确定</div>
		</div>
	</mt-picker>
</mt-popup>

js：

handlepartFn(type, refName) {
	this.currentPart = this.$refs[refName].getValues()[0];
	// this.currentPart此变量为当前mt-picker的值
},