ZBLOG

要在点击操作列中的“跟进”按钮时以弹窗形式打开 FollowUpModal,你需要使用一个状态来控制弹窗的显示与否。以下是修改后的代码示例:

<template>
  <a-table
    :columns="columns"
    :data-source="data"
    :scroll="{
      x: columns.reduce((sum, col) => sum + (col.width || 0), 0) > 1800 ? undefined : 'max-content'
    }"
    :pagination="{
      current: currentPage,
      pageSize: pageSize,
      total: totalRecords,
      pageSizeOptions: ['10', '20', '30', '40', '100'],
      onShowSizeChange: handlePageSizeChange,
      onChange: handlePageChange,
      showQuickJumper: true,
      showSizeChanger: true,
      showTotal: (total, range) => `显示 ${range[0]}~${range[1]} 条记录,共 ${total} 条记录`
    }"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'operation'">
        <a-button @click="openFollowUpModal(record)">跟进</a-button>
      </template>
    </template>
  </a-table>

  <!-- 弹窗 -->
  <FollowUpModal v-model:visible="isModalVisible" @close="closeFollowUpModal"/>
</template>

<script setup>
import { ref } from 'vue';
import FollowUpModal from '../workOrderManager/components/followUpPage.vue'

const columns = ref([]);
const data = ref([]);
const isModalVisible = ref(false);
const currentRecord = ref(null);

const openFollowUpModal = (record) => {
  currentRecord.value = record; // 保存当前记录信息
  isModalVisible.value = true; // 打开弹窗
};

const closeFollowUpModal = () => {
  isModalVisible.value = false; // 关闭弹窗
};
</script>

<style scoped>
/* 根据需求添加样式 */
</style>

修改说明:

  1. 新增状态:定义了 isModalVisiblecurrentRecord 两个响应式变量。

    • isModalVisible 控制弹窗的显示与隐藏。
    • currentRecord 用于保存当前被跟进的记录。
  2. 打开和关闭弹窗

    • 点击“跟进”按钮时调用 openFollowUpModal(record) 方法,传入当前行的数据,并将 isModalVisible 设置为 true
    • 在弹窗中使用 @close 自定义事件来处理关闭动作。
  3. 在弹窗中接收参数:确保你的 FollowUpModal 能接收并使用这些数据,可能需要调整其实现以适应传入的内容。

注意,你需要确保在 FollowUpModal 中正确地处理可见性状态,并根据传递的数据执行相应的逻辑。


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

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?