ZBLOG

要实现点击“跟进”按钮时传递 record 并判断需要在页面上隐藏或展示的值,可以按照以下步骤进行调整:

  1. 创建一个响应式变量来存储当前要跟进的记录
  2. followUp 函数中更新这个变量
  3. 使用条件渲染来控制模态框的显示和隐藏

下面是更新后的代码示例:

  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. <!-- 使用条件渲染控制 FollowUpModal 的显示 -->
  24. <FollowUpModal
  25. v-if="isModalVisible"
  26. :record="currentRecord"
  27. @close="isModalVisible = false"
  28. />
  29. </template>
  30. </template>
  31. </a-table>
  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 isModalVisible = ref(false); // 控制模态框是否可见
  39. const currentRecord = ref(null); // 当前跟进的记录
  40. const followUp = (record) => {
  41. console.log('跟进', record);
  42. currentRecord.value = record; // 设置当前记录
  43. isModalVisible.value = true; // 显示模态框
  44. };
  45. </script>

更改说明:

  1. isModalVisible:用来控制模态框的显示与否。
  2. currentRecord:用来存储当前选中的记录,以便在模态框中使用。
  3. followUp 方法中,我们将点击的 record 存入 currentRecord,并将 isModalVisible 设置为 true,从而打开模态框。
  4. <FollowUpModal /> 中使用了 v-if 指令,以根据 isModalVisible 的状态来决定是否渲染这个组件,并通过属性传递当前记录。

模态框关闭事件处理:

为了能关闭模态框,你可以在 FollowUpModal.vue 中触发一个事件,在这里我们通过绑定一个自定义事件 (@close) 来实现。

希望这个代码片段能够帮助你完成需求!如果有其他问题,请随时问我。


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

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?