# DimensionTreeTable api

## 实例

```html
<template>
  <div class="demo">
    <dimension-tree-table :data="selectedData" #default="{trItem}">
      <span>{{ trItem.names }}</span>
    </dimension-tree-table>
  </div>
</template>

<script>
  import DimensionTreeTable from "@/components/common/DimensionTreeTable";

  export default {
    name: "demo",
    components: {
      DimensionTreeTable
    },
    data() {
      return {
        selectedData: [[{"id":1,"name":"颜色1"}],[{"id":11,"name":"尺码1"},{"id":12,"name":"尺码2"}]],
      };
    },
    methods: {
    }
  };
</script>
```

## props

| 属性 | 说明               | 类型  | 默认值 |
| ---- | ------------------ | ----- | ------ |
| data | 生成表格的二维数组 | Aarry | []     |


## Scoped Slot

| name | 说明                                  |
| ---- | ------------------------------------- |
| -    | 自定义表格行的内容，参数为 { trItem } |

**说明：** 实例中采用vue2.6以上slot新语法编写，查看[具体文档](https://cn.vuejs.org/v2/guide/components-slots.html)


## trItem说明

| 字段    | 说明               |
| ------- | ------------------ |
| tdList  | 表格单行渲染的数组 |
| allList | 表格单行完整数组   |
| ids     | 单行条目的id       |
| names   | 单行条目的名称     |

### example
```json
{
    "tdList": [
        {
            "id": 1112,
            "name": "来源2",
            "selected": true,
            "rowspan": 1
        }
    ],
    "allList": [
        {
            "id": 11,
            "name": "尺码1",
            "selected": true,
            "rowspan": 4
        },
        {
            "id": 111,
            "name": "材质1",
            "selected": true,
            "rowspan": 2
        },
        {
            "id": 1112,
            "name": "来源2",
            "selected": true,
            "rowspan": 1
        }
    ],
    "ids": "11_111_1112",
    "names": "尺码1_材质1_来源2"
}
```
