20. 用列表展示数据

使用森林结构展示数据

[{title, data: [record1,record2,...]}, 
 {title, data: [record1,record2,...]}, 
 ...]

在组件创建前先获取数据, 别忘了依赖于外部的数据要用计算属性computed, 这里使用getter/setter语法

    get recordList() {
      return this.$store.state.recordList
    }
    beforeCreate(){
      this.$store.commit('fetchRecords')
    }

在v-for中获取数组index的语法

    <ol>
      <li v-for="(record,index) in recordList" :key="index">
        {{record}}
      </li>
    </ol>

这个时间格式是ISO8061

获取森林结构数据

    get result(){
      const {recordList} = this;
      type HashTableValue = {title: string, items: RecordItem[]}
      const hashTable: {[key: string]: HashTableValue} = {}
      for(let i = 0; i < recordList.length; i++){
         const [date,time] = recordList[i].createAt.split('T')
         hashTable[date] = hashTable[date] || {title: date, items: []}
         hashTable[date].items.push(recordList[i])
      }
      return hashTable
    }

注意空对象类型表示方法：

const hashTable: {[key: string]: HashTableValue} = {}

渲染数据

<ol>
  <li v-for="(group,index) in result" :key="index">
    <h3>{{group.title}}</h3>
    <ol>
      <li v-for="(item,index) in group.items" :key="index">
        {{item.amount}} {{item.createAt}}
      </li>
    </ol>
  </li>
</ol>

reset header

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}