6-3【微信小程序全栈开发课程】记录页面（三）--记录数据组件初

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;
}

作者：猫宁一
全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~
可到【猫宁一】公众号回复【源码】领取我所有全栈项目代码哦~

点击查看课程目录：微信小程序全栈开发课程目录