案例-医疗系统

需求：
1.实现搜索框根据关键词 查询出对应的数据
2.封装个表格组件，组件里边记录，根据父组件传递过来的数组展示

3. 封装一个洋情组件
4. 点击详情的时候，可以打开弹窗组件，并且展示用户的信息
5. 点击x关闭弹窗组件

1.1 渲染数据

<tbody>
  <tr v-for="(item, index) in records2" :key="index">
    <td>{{ item.date }}</td>
    <td>{{ item.doctor }}</td>
    <td>{{ item.diagnosis }}</td>
    <td>{{ item.prescription }}</td>
    <td @click="detail(item)">详情</td>
  </tr>
</tbody>

records: [
  {
    date: '2022-01-01',
    doctor: '张三',
    diagnosis: '感冒',
    prescription: '感冒药'
  },
  {
    date: '2022-02-01',
    doctor: '李四',
    diagnosis: '头疼',
    prescription: '止疼药'
  },
  {
    date: '2022-03-01',
    doctor: '王五',
    diagnosis: '腰痛',
    prescription: '止痛贴'
  }
]

1.2 计算属性筛选结果

<!-- lazy等失去焦点再筛选 -->
<input placeholder="输入关键字搜索" v-model.lazy="keywords" />
data () {
  return {
    keywords: '', // 和输入框双向绑定
  }
}

<tbody>
  <tr v-for="(item, index) in records2" :key="index">
    <td>{{ item.date }}</td>
    <td>{{ item.doctor }}</td>
    <td>{{ item.diagnosis }}</td>
    <td>{{ item.prescription }}</td>
    <td @click="detail(item)">详情</td>
  </tr>
</tbody>
computed: {
  records2 () {
    if (this.keywords === '') {
      return this.records
    } else {
      return this.records.filter(item => item.doctor === this.keywords)
    }
  }
},

1.3 点击查看详情

• 点击查看详情，把数据传递给子组件

<td @click="detail(item)">详情</td>
ren: {}, // 存一个人的信息，准备把他传递给子组件
methods: {
  detail (item) {
    // 1. 想办法把当前这条数据，传递给子组件
    this.ren = item
  }
},
<MyDialog :ren="ren" ></MyDialog>

<div class="modal-body">
  <p><strong>就诊日期：</strong>{{ ren.date }}</p>
  <p><strong>医生姓名：</strong>{{ ren.doctor }}</p>
  <p><strong>诊断结果：</strong>{{ ren.diagnosis }}</p>
  <p><strong>处方信息：</strong>{{ ren.prescription }}</p>
</div>
<script>
export default {
  props: {
    ren: Object,
  }
}
</script>

1.3 控制详情的显示和隐藏-sync修饰符

<MyDialog :ren="ren" :visible.sync="visible"></MyDialog>
methods: {
  detail (item) {
    // 1. 想办法把当前这条数据，传递给子组件
    this.ren = item
    // 2. 修改visible，让弹层显示
    this.visible = true
  }
},


<script>
export default {
  props: {
    ren: Object,
    visible: Boolean // props校验类型为布尔值
  }
}
</script>
<div class="modal-mask" v-show="visible"> // 控制详情的显示与隐藏
  <div class="modal-container">
    <div class="modal-header">
      <h3>就诊记录详情</h3>
      <span class="close-btn" @click="$emit('update:visible', false)">X</span> // 点击x号让父组件关闭详情
    </div>
    <div class="modal-body">
      <p><strong>就诊日期：</strong>{{ ren.date }}</p>
      <p><strong>医生姓名：</strong>{{ ren.doctor }}</p>
      <p><strong>诊断结果：</strong>{{ ren.diagnosis }}</p>
      <p><strong>处方信息：</strong>{{ ren.prescription }}</p>
    </div>
  </div>
</div>