Vue TimePicker表单编辑时无法正确回显营业时间值

云原生阿岚

2026-7-10

问题解决：vue-material-time-picker编辑回显错误

核心原因：参数传递顺序不匹配

你在模板中调用openModal时的参数顺序，和函数定义的参数顺序完全不一致，导致数据赋值错位，这是引发回显异常的根本原因：

模板中的调用（错误顺序）：

<WarningButton
@click="openModal(2,emp.name,emp.email,emp.phone,emp.business_start_time,emp.business_finish_time,emp.department_id,emp.id)">

这里第5个参数是emp.business_start_time，第6个是emp.business_finish_time，第7个是emp.department_id。

函数定义的参数（接收顺序）：

const openModal = (op,name,email,phone,department,business_start_time,business_finish_time,employee) =>{

函数期望第5个参数是department（部门ID），第6个是business_start_time，第7个是business_finish_time。

错位后直接导致：

business_start_time变量拿到的是emp.business_finish_time（所以开始时间显示结束时间）
business_finish_time变量拿到的是emp.department_id（所以结束时间显示部门ID的数值1）

修正步骤

调整模板中openModal的参数顺序，把部门ID放在第5位，时间参数后移：

<WarningButton
@click="openModal(2,emp.name,emp.email,emp.phone,emp.department_id,emp.business_start_time,emp.business_finish_time,emp.id)">

确认openModal内的赋值逻辑，现在参数对应正确，赋值会恢复正常：

else{
    title.value = 'Edit employee';
    form.name=name;
    form.email=email;
    form.phone=phone;
    form.department_id=department; // 正确获取部门ID
    form.business_start_time=business_start_time; // 正确获取开始时间
    form.business_finish_time=business_finish_time; // 正确获取结束时间
    console.log('start '+ business_start_time); // 输出13:00
    console.log('finish '+ business_finish_time); // 输出20:00
}