为了实现点击“跟进”按钮时打开 FollowUpModal 并传递当前行的数据,我们可以利用 Vue 的状态管理机制来控制模态框的显示和数据传递。这里是一个简化的实现方案:
在父组件中添加状态变量:我们需要一个布尔值来控制模态框是否可见,以及一个对象来存储选中的记录。
更新
followUp方法:这个方法将更新状态并使模态框可见。将状态和记录传递给
FollowUpModal:通过 props 传递所需的信息。
以下是具体代码示例:
<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="followUp(record)">跟进</a-button>
      </template>
    </template>
  </a-table>
  <!-- Modal 控制 -->
  <FollowUpModal 
    v-model:visible="modalVisible" 
    :record="selectedRecord" 
    @close="handleCloseModal"
  />
</template>
<script setup>
import { ref } from 'vue';
import FollowUpModal from '../workOrderManager/components/followUpPage.vue'
const columns = ref([]);
const data = ref([]);
const modalVisible = ref(false);
const selectedRecord = ref(null);
const followUp = (record) => {
  console.log('跟进', record);
  selectedRecord.value = record; // 设置当前行数据
  modalVisible.value = true; // 打开模态框
};
const handleCloseModal = () => {
  modalVisible.value = false; // 关闭模态框
};
</script>
<!-- FollowUpModal.vue -->
<template>
  <a-modal
    v-model:visible="visible"
    title="跟进信息"
    @cancel="close"
    @ok="$emit('close')"
  >
    <div>
      <!-- 在这里使用 record 渲染数据 -->
      <p>当前跟进记录:</p>
      <pre>{{ record }}</pre> <!-- 示例显示选中记录 -->
      
      <!-- 可以放置其他输入或者展示内容 -->
      
    </div>
  </a-modal>
</template>
<script setup>
import { defineProps, toRefs } from 'vue';
const props = defineProps({
  visible: Boolean,
  record: Object
});
const { visible, record } = toRefs(props);
const close = () => {
  emit('close');
};
</script>
核心点说明:
modalVisible和selectedRecord用于控制模态框的可见性及传递选中的行数据。- 点击“跟进”按钮时,调用 
followUp方法,设置相应的状态并打开模态框。 - 在 
FollowUpModal中,通过 props 接收record数据进行渲染,同时使用$emit来关闭模态框。 - 确保在使用 
<FollowUpModal />时,你正确地绑定了这些属性和事件。
内容由零声教学AI助手提供,问题来源于学员提问 


        
        
        
        
        
        
        
        
        
                
                
                
                
                
                
                