要在点击操作列中的“跟进”按钮时以弹窗形式打开 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>
修改说明:
新增状态:定义了
isModalVisible
和currentRecord
两个响应式变量。isModalVisible
控制弹窗的显示与隐藏。currentRecord
用于保存当前被跟进的记录。
打开和关闭弹窗:
- 点击“跟进”按钮时调用
openFollowUpModal(record)
方法,传入当前行的数据,并将isModalVisible
设置为true
。 - 在弹窗中使用
@close
自定义事件来处理关闭动作。
- 点击“跟进”按钮时调用
在弹窗中接收参数:确保你的
FollowUpModal
能接收并使用这些数据,可能需要调整其实现以适应传入的内容。
注意,你需要确保在 FollowUpModal
中正确地处理可见性状态,并根据传递的数据执行相应的逻辑。
内容由零声教学AI助手提供,问题来源于学员提问