ZBLOG

为了实现点击“跟进”按钮时打开 FollowUpModal 并传递当前行的数据,我们可以利用 Vue 的状态管理机制来控制模态框的显示和数据传递。这里是一个简化的实现方案:

  1. 在父组件中添加状态变量:我们需要一个布尔值来控制模态框是否可见,以及一个对象来存储选中的记录。

  2. 更新 followUp 方法:这个方法将更新状态并使模态框可见。

  3. 将状态和记录传递给 FollowUpModal:通过 props 传递所需的信息。

以下是具体代码示例:

  1. <template>
  2. <a-table
  3. :columns="columns"
  4. :data-source="data"
  5. :scroll="{
  6. x: columns.reduce((sum, col) => sum + (col.width || 0), 0) > 1800 ? undefined : 'max-content'
  7. }"
  8. :pagination="{
  9. current: currentPage,
  10. pageSize: pageSize,
  11. total: totalRecords,
  12. pageSizeOptions: ['10', '20', '30', '40', '100'],
  13. onShowSizeChange: handlePageSizeChange,
  14. onChange: handlePageChange,
  15. showQuickJumper: true,
  16. showSizeChanger: true,
  17. showTotal: (total, range) => `显示 ${range[0]}~${range[1]} 条记录,共 ${total} 条记录`
  18. }"
  19. >
  20. <template #bodyCell="{ column, record }">
  21. <template v-if="column.key === 'operation'">
  22. <a-button @click="followUp(record)">跟进</a-button>
  23. </template>
  24. </template>
  25. </a-table>
  26. <!-- Modal 控制 -->
  27. <FollowUpModal
  28. v-model:visible="modalVisible"
  29. :record="selectedRecord"
  30. @close="handleCloseModal"
  31. />
  32. </template>
  33. <script setup>
  34. import { ref } from 'vue';
  35. import FollowUpModal from '../workOrderManager/components/followUpPage.vue'
  36. const columns = ref([]);
  37. const data = ref([]);
  38. const modalVisible = ref(false);
  39. const selectedRecord = ref(null);
  40. const followUp = (record) => {
  41. console.log('跟进', record);
  42. selectedRecord.value = record; // 设置当前行数据
  43. modalVisible.value = true; // 打开模态框
  44. };
  45. const handleCloseModal = () => {
  46. modalVisible.value = false; // 关闭模态框
  47. };
  48. </script>
  49. <!-- FollowUpModal.vue -->
  50. <template>
  51. <a-modal
  52. v-model:visible="visible"
  53. title="跟进信息"
  54. @cancel="close"
  55. @ok="$emit('close')"
  56. >
  57. <div>
  58. <!-- 在这里使用 record 渲染数据 -->
  59. <p>当前跟进记录:</p>
  60. <pre>{{ record }}</pre> <!-- 示例显示选中记录 -->
  61. <!-- 可以放置其他输入或者展示内容 -->
  62. </div>
  63. </a-modal>
  64. </template>
  65. <script setup>
  66. import { defineProps, toRefs } from 'vue';
  67. const props = defineProps({
  68. visible: Boolean,
  69. record: Object
  70. });
  71. const { visible, record } = toRefs(props);
  72. const close = () => {
  73. emit('close');
  74. };
  75. </script>

核心点说明:

  1. modalVisibleselectedRecord 用于控制模态框的可见性及传递选中的行数据。
  2. 点击“跟进”按钮时,调用 followUp 方法,设置相应的状态并打开模态框。
  3. FollowUpModal 中,通过 props 接收 record 数据进行渲染,同时使用 $emit 来关闭模态框。
  4. 确保在使用 <FollowUpModal /> 时,你正确地绑定了这些属性和事件。


    内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=22498

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?