vue实现用于展示患者的就诊记录。每一条就诊记录需要展示就诊日期、医生姓名、诊断结果和处方信息。用户可以通过输入关键字进行搜索，搜索结果将实时展示在表格中。点击详情可以弹出一个弹窗组件，展示基本信息。 需求： 1. 实现搜索框根据关键词 查询出对应的数据 2. 封装一个表格组件，组件里边人记录，根据父组件传递过来的数组展示 3. 封装一个详情组件 4. 点击详情的时候，可以打开弹窗组件，并且展示用户的信息 5. 点击X关闭弹窗 组件

针对以上需求，可以按照以下步骤进行实现：

1. 创建一个包含就诊日期、医生姓名、诊断结果和处方信息的数据结构，并保存在一个数组中。
2. 在父组件中创建一个搜索框，并绑定一个方法，该方法接收用户输入的关键字并过滤出符合条件的数据，将过滤后的数据传递给表格子组件。
3. 创建一个表格子组件，接收父组件传递的数据并展示在表格中。
4. 在表格子组件中设置一个“详情”按钮，点击时触发一个方法，该方法将所选记录的数据传递给详情子组件并打开弹窗。
5. 创建一个详情子组件，接收父组件传递的数据并展示在弹窗中。
6. 在详情子组件中设置一个“关闭”按钮，点击时触发一个方法，该方法关闭弹窗。

下面是一个简单的代码示例：

<!-- 父组件 -->
<template>
  <div>
    <input type="text" v-model="searchKeyword" @input="searchRecords" placeholder="请输入关键字">
    <table-component :data="filteredRecords" @show-detail="showDetail"></table-component>
    <detail-component :data="selectedRecord" :show="showDialog" @close="closeDialog"></detail-component>
  </div>
</template>

<script>
import TableComponent from './TableComponent.vue'
import DetailComponent from './DetailComponent.vue'

export default {
  data() {
    return {
      records: [
        { date: '2022-01-01', doctor: '张三', diagnosis: '感冒', prescription: '药品A' },
        { date: '2022-01-02', doctor: '李四', diagnosis: '发烧', prescription: '药品B' },
        { date: '2022-01-03', doctor: '王五', diagnosis: '胃疼', prescription: '药品C' }
      ],
      searchKeyword: '',
      filteredRecords: [],
      selectedRecord: null,
      showDialog: false
    }
  },
  components: {
    TableComponent,
    DetailComponent
  },
  methods: {
    searchRecords() {
      this.filteredRecords = this.records.filter(record =>
        record.date.includes(this.searchKeyword) ||
        record.doctor.includes(this.searchKeyword) ||
        record.diagnosis.includes(this.searchKeyword) ||
        record.prescription.includes(this.searchKeyword)
      )
    },
    showDetail(record) {
      this.selectedRecord = record
      this.showDialog = true
    },
    closeDialog() {
      this.showDialog = false
    }
  }
}
</script>

<!-- 表格子组件 -->
<template>
  <table>
    <thead>
      <tr>
        <th>就诊日期</th>
        <th>医生姓名</th>
        <th>诊断结果</th>
        <th>处方信息</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="record in data" :key="record.date">
        <td>{{ record.date }}</td>
        <td>{{ record.doctor }}</td>
        <td>{{ record.diagnosis }}</td>
        <td>{{ record.prescription }}</td>
        <td><button @click="$emit('show-detail', record)">详情</button></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

<!-- 详情子组件 -->
<template>
  <div v-if="show">
    <h2>就诊记录详情</h2>
    <p>就诊日期：{{ data.date }}</p>
    <p>医生姓名：{{ data.doctor }}</p>
    <p>诊断结果：{{ data.diagnosis }}</p>
    <p>处方信息：{{ data.prescription }}</p>
    <button @click="$emit('close')">关闭</button>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      required: true
    },
    show: {
      type: Boolean,
      required: true
    }
  }
}
</script>

在上述示例中，我们创建了一个包含就诊日期、医生姓名、诊断结果和处方信息的数据结构，并保存在 `records` 数组中。在父组件中，我们创建了一个搜索框和一个表格子组件，通过绑定和监听 `searchKeyword` 实现了搜索功能。在表格子组件中，我们展示了父组件传递的数据，并通过 `$emit` 方法向父组件发送了“展示详情”事件。在详情子组件中，我们展示了父组件传递的数据，并通过 `$emit` 方法向父组件发送了“关闭弹窗”事件。

需要注意的是，以上示例仅为一个简单的实现，具体的实现方式可能会因项目不同而有所差异。