1、功能介绍
在记录页面对记录数据进行展示，每条记录数据后面都有编辑按钮，点击编辑按钮，出现修改文本框，点击修改按钮后，文本框会自动收起
2、创建组件
在src/components文件夹下面创建一个RecordList.vue文件，用来展示一条记录
写入vue基础代码
<template> <div> 记录数据组件 </div> </template> <script> export default { } </script> <style lang='scss'> </style>
3、在记录页面引入组件
编辑record.vue文件。通过import引入组件，并添加components函数中声明RecordList组件
//参考代码，无需粘贴 //<script> //需要粘贴的部分，通过import引入组件 import RecordList from '@/components/RecordList' //参考代码，无需粘贴 //export default { //需要粘贴的部分，添加components对象声明组件 components: { RecordList },
4、循环调用组件
继续编辑record.vue文件的template部分
<!-- 参考数据，无需粘贴 <div v-else> <div class="table th"> <div class="date">时间</div> <div class="busi">分数</div> <div class="mark">最后得分</div> <div class="net">备注</div> </div> --> <!-- 需要添加的部分 —> <!-- :record是将每个循环的记录数据传到RecordList组件中 --> <RecordList :key='index' v-for='(record,index) in records' :record = 'record'></RecordList> <!-- 参考数据，无需粘贴 </div> -->
5、在子组件中获取数据
父组件record.vue中，用:record = 'record'
给子组件RecordList.vue传递数据，编辑RecordList.vue文件获取到这个数据
//参考代码，无需粘贴 //<script> //export default { //需要添加的部分，获取到父组件传递过来的数据 props: ['record'], //参考代码，无需粘贴 //} //</script>
6、添加样式代码
添加代码到style标签中
.book-card{ background: #FFFFFF; margin-bottom:6px; .table { border: 0px solid darkgray; font-size: 15px; height: 42px; line-height:42px; .tr { display: flex; width: 100%; } .date{ width: 40%; margin-left: 10px; } .busi{ width: 10%; font-weight:bold; } .mark{ width: 15%; margin-left: 20px; font-weight:bold; } .net{ width: 16%; text-align:center; width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 14px; margin-left: 5px; line-height:42px; .no-note{ text-decoration:underline; color:#C0C0C0; font-size: 13px; } } .image{ padding-top:1px; float: right; margin-left: 5px; } } .hide{ background: #F0F0F0; font-size: 15px; padding: 10px 10px 3px 30px; .input{ width:60%; height:30px; background:#FFFFFF; border:1px solid black; border-radius: 5px; text-align:center; } .btn{ color:white; background:#EA5A49; padding-left: 15px; margin-right:20px; border-radius: 5px; font-size: 13px; line-height: 30px; height: 30px; width: 18%; float:right; } } .img{ width: 13px; height: 13px; margin-right: 5px; } } ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
