组件属性--@tree

我们可以在item配置项中嵌套使用item/tree/list组件,以应对复杂的需求

在ITEM组件中嵌套使用tree组件

我们通过前缀符号@定义组件属性,在ITEM的结构中,我们可以嵌套部署@item, @list, @tree等组件,我无需调整模板
tree是基于list的扩展,在list的基础上,tree能够通过数据的层次结构输出层次的模板结构

基础语法

  const app = getApp()
  const Pager = require('components/aotoo/core')
  Pager({
    data: {
      motto: Pager.item({
        title: '使用LIST组件完成复杂结构',
        "@tree": {
          data: [ ... ],  // tree组件的data属性
          show: true,
          itemClass: 'tree-item-class',  // 为tree的每一个Item子项设置初始样式
          listClass: 'tree-class',  // tree的容器样式
        }
      })
    },

@tree的数据结构

tree的数据结构与list的数据结构一致,数据项中新增idf, parent两个关键字,用于描述数据层次

  {
    '@tree': {
      data: [
        {title: '父级', idf: 'level-1'},
        {title: '子项一', parent: 'level-1'},
        {title: '子项二', parent: 'level-1'},
        {title: '子项三', parent: 'level-1'},
        {title: '子项四', parent: 'level-1'}
      ],
      itemClass: ''
    }
  }

示例

  • item结构
  • ITEM的组成结构

    • 代码部分
      Pager({
        data: {
          motto: Pager.item({......})
        },
        onLoad: function(){
          listData = {
            itemClass: 'x',
            title: [
              {
                '@tree': {
                  data: [
                    {title: {title: '层级一', class: 'h6'}, idf: 'level_1'},
                    {title: {title: 'content', class: 'h6'}, parent: 'level_1'},
                    {title: {title: '层级二', class: 'h6'}, parent: 'level_1', idf: 'level_2', aim: 'abc'},
                    {title: {title: '点击删除本行', class: 'h6', style: 'text-decoration: underline;'}, parent: 'level_2', tap: 'mytree-delete'},
                    {title: {title: 'content', class: 'h6'}, parent: 'level_2'},
                    {title: {title: '层级三', class: 'h6'}, parent: 'level_2', idf: 'level_3'},
                    {title: {title: 'content', class: 'h6'}, parent: 'level_3'},
                    {title: {title: 'content', class: 'h6'}, parent: 'level_3'},
                  ]
                }
              },
            ]
          }
          const motto = Pager.getElementsById('motto') 
          motto.reset().update(listData)
        }
        ...
        ...
      })