树形结构表格

基础用法

属性说明
:tree_props{children: 'children', hasChildren: 'hasChildren'}children指定rowData中的行的children数据,hasChildren指定该行是否有children数据
:row_key列字段名指定rowData中的一个“row_key”

html示例:

<yui-table
    :rowData="rowData数据对象"
    :headerData="headerData数据对象"
    :controlAtrr="controlAtrr数据对象"
    :tree_props="{children: 'children', hasChildren: 'hasChildren'}"
>
</yui-table>

rowData示例

[
  {
    id: 1,
    date: '2016-05-02',
    name: '王小虎',
    age: '10岁',
    age_num: '10',
    num: '9',
    address: '上海市普陀区金沙江路 1518 弄',
    province: '上海',
    city: '上海',
    zip: '11011',
    hasChildren: true,
  },
  {
    id: 2,
    date: '2016-05-04',
    name: '王大虎',
    age: '120岁',
    age_num: 20,
    num: 120,
    address: '上海市普陀区金沙江路 1517 弄',
    province: '上海',
    city: '上海',
    zip: '11011',

  },
  {
    id: 3,
    date: '2016-05-01',
    name: '王小虎',
    age: '256岁',
    age_num: 256,
    num: 26,
    address: '上海市普陀区金沙江路 1519 弄',
    province: '上海',
    city: '上海',
    zip: '11011',
    children: [{
      id: 31,
      date: '2016-05-01',
      name: '王小虎',
      age: '20岁',
      age_num: 20,
      num: 203,
      address: '上海市普陀区金沙江路 1519 弄',
      province: '上海',
      city: '上海',
      zip: '11011',

    }, {
      id: 32,
      date: '2016-05-01',
      name: '王小虎',
      age: '12岁',
      age_num: 12,
      num: 132,
      address: '上海市普陀区金沙江路 1519 弄',
      province: '上海',
      city: '上海',
      zip: '11011',
    }]
  },
  {
    id: 4,
    date: '2016-05-03',
    name: '王小虎',
    age: '66岁',
    age_num: 66,
    num: 345,
    address: '上海市普陀区金沙江路 1516 弄',
    hasChildren: true,
    province: '上海',
    city: '上海',
    zip: '11011',
  }]

效果

图片bandStatus

注意事项

带状态表格不对固定位置的列生效,示例中“日期”列为固定位置列

Last Updated:
Contributors: wangyifan