要实现点击"修改明细"按钮后跳转到mzHj的mzCfhj分页,并将CflistManage内选中的数据传输给mzCfhj,你可以按照以下步骤进行操作:

  1. 在mzHj组件中,定义一个数据属性,用于存储从CflistManage组件传递过来的选中数据。例如,可以在data中添加一个selectedData属性:
data() {
  return {
    selectedData: null
  }
}
  1. 在CflistManage组件中,通过事件机制将选中的数据传递给mzHj组件。首先,在CflistManage组件的methods中定义一个方法,用于触发传递数据的事件。例如,可以命名为btnChangeDetail:
methods: {
  btnChangeDetail() {
    this.$emit('change-detail', this.selectedData);
  }
}
  1. 在CflistManage组件的模板中,将按钮的点击事件绑定到btnChangeDetail方法上:
<a-button type="primary" @click="btnChangeDetail">修改明细</a-button>
  1. 在mzHj组件的模板中,为CflistManage组件添加一个自定义事件监听器,用于接收传递的选中数据。在a-card组件的p标签中添加v-on指令,监听CflistManage组件的change-detail事件,并将选中的数据赋值给selectedData属性:
<p v-else-if="activeKey === '2'">
  <CflistManage @change-detail="selectedData = $event" />
</p>
  1. 在mzHj组件的methods中,定义一个方法用于处理tabChange事件,该方法将被绑定到a-card组件的tabChange事件上。在该方法中,根据需要跳转到mzCfhj分页:
methods: {
  onTabChange(key) {
    this.activeKey = key;
    if (key === '1') {
      // 跳转到mzCfhj分页
    }
  }
}
  1. 最后,在mzCfhj组件中,通过props接收选中的数据,并在模板中使用:
props: {
  selectedData: {
    type: Object,
    default: null
  }
}

通过以上步骤,你可以实现点击"修改明细"按钮后跳转到mzHj的mzCfhj分页,并将CflistManage内选中的数据传输给mzCfhj。请根据具体情况进行适当调整和修改

mzHjvue内有template a-card bordered=false style=height 100 tab-list=tabList active-tab-key=activeKey tabChange=key = onTabChangekey p v-if=activeKey === 1 mzCfhj p p v-else-if=activeKey

原文地址: http://www.cveoy.top/t/topic/iXHd 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录