需求：
1.實(shí)現(xiàn)搜索框根據(jù)關(guān)鍵詞 查詢出對(duì)應(yīng)的數(shù)據(jù)
2.封裝個(gè)表格組件，組件里邊記錄韵卤，根據(jù)父組件傳遞過來的數(shù)組展示
- 封裝一個(gè)洋情組件
- 點(diǎn)擊詳情的時(shí)候，可以打開彈窗組件崇猫，并且展示用戶的信息
- 點(diǎn)擊x關(guān)閉彈窗組件
1.1 渲染數(shù)據(jù)
<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 計(jì)算屬性篩選結(jié)果
<!-- lazy等失去焦點(diǎn)再篩選 -->
<input placeholder="輸入關(guān)鍵字搜索" 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 點(diǎn)擊查看詳情
- 點(diǎn)擊查看詳情沈条，把數(shù)據(jù)傳遞給子組件
<td @click="detail(item)">詳情</td>
ren: {}, // 存一個(gè)人的信息，準(zhǔn)備把他傳遞給子組件
methods: {
detail (item) {
// 1. 想辦法把當(dāng)前這條數(shù)據(jù)诅炉，傳遞給子組件
this.ren = item
}
},
<MyDialog :ren="ren" ></MyDialog>
<div class="modal-body">
<p><strong>就診日期：</strong>{{ ren.date }}</p>
<p><strong>醫(yī)生姓名：</strong>{{ ren.doctor }}</p>
<p><strong>診斷結(jié)果：</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. 想辦法把當(dāng)前這條數(shù)據(jù)蜡歹，傳遞給子組件
this.ren = item
// 2. 修改visible，讓彈層顯示
this.visible = true
}
},
<script>
export default {
props: {
ren: Object,
visible: Boolean // props校驗(yàn)類型為布爾值
}
}
</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> // 點(diǎn)擊x號(hào)讓父組件關(guān)閉詳情
</div>
<div class="modal-body">
<p><strong>就診日期：</strong>{{ ren.date }}</p>
<p><strong>醫(yī)生姓名：</strong>{{ ren.doctor }}</p>
<p><strong>診斷結(jié)果：</strong>{{ ren.diagnosis }}</p>
<p><strong>處方信息：</strong>{{ ren.prescription }}</p>
</div>
</div>
</div>
