## tree-table树形表格
树形表格比表格 table 差不多，列扩展也是一样，多了一个属性``` tree:true ```与```treeProps``` (树形时这2个属性必须设置)，```treeProps``` 为树形表格子级 `key` ,默认 `children`，可注释
```
<component-tree-table :data="billData"/>
# 数据结构
tableData: {
tree:true,// true 为树形表格
treeProps:{ hasChildren: 'hasChildren', children: 'children' },// treeKey 为树形表格子级 key ,默认 children
defaultExpandAll:false,// 是否默认展开所有节点,默认false
indent:16,// 树形缩进，默认16,不需要可去掉
rowKey:function (row) {// 树形结构，必须设置
return row.id;
},
expandRowKeys:[88,122],// 展开行的 keys 数组,不需要可去掉
rowClick(dom,row,index,e){// 单击行事件,不需要可去掉
// dom.toggleRowExpansion(row);// 点击整行展开树形节点
},
rowDblclick(dom,row,index,e){// 双击行事件,不需要可去掉
console.log('双击');
},
expandChange(dom,row,expanded){// 树形表格展开事件,不需要可去掉
console.log('222',expanded);
},
rowContextmenu(dom,row, column, event){// 鼠标右键点击触发事件,不需要可去掉
console.log(666);
},
headerClick(dom,row,index,e){// 单击某一列表头事件,不需要可去掉
console.log('单击表头');
},
headerContextmenu(dom,row, column, event){// 鼠标右键点击某一列表头触发事件,不需要可去掉
console.log('鼠标右键表头');
},
// ...... 其他属性跟 table 表格一致
}
```
### 数据
数据结构多了一个 `children` 数组
```
let data = [
{id:1, date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1518 弄', zip: 200333, status:0,image:'http://img1.2345.com/duoteimg/qqTxImg/2/5804bb86e3d62336.jpg%21200x200.jpg'},
{id:2, date: '2016-05-04', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1517 弄', zip: 200333, status:1,image:'http://img1.2345.com/duoteimg/qqTxImg/2/5804bb86e3d62336.jpg%21200x200.jpg'},
{id:3, date: '2016-05-01', name: '王小虎', province: '上海', city: '普陀区', address: '上海市普陀区金沙江路 1519 弄', zip: 200333, status:0,image:'http://img1.2345.com/duoteimg/qqTxImg/2/5804bb86e3d62336.jpg%21200x200.jpg'},
{
id:4,
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333,
status:0,
image:'http://img1.2345.com/duoteimg/qqTxImg/2/5804bb86e3d62336.jpg%21200x200.jpg',
children: [{
id: 31,
date: '2016-05-01',
level: '2',
name: '1111',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
status:0,
zip: 200333,
image:'http://img1.2345.com/duoteimg/qqTxImg/2/5804bb86e3d62336.jpg%21200x200.jpg'
}, {
id: 32,
date: '2016-05-01',
level: '2',
name: '2222',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
status:0,
zip: 200333,
image:'http://img1.2345.com/duoteimg/qqTxImg/2/5804bb86e3d62336.jpg%21200x200.jpg'
}]
},
{
id:6,
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333,
status:0,
image:'http://img1.2345.com/duoteimg/qqTxImg/2/5804bb86e3d62336.jpg%21200x200.jpg',
children: [{
id: 41,
date: '2016-05-01',
level: '2',
name: '3333',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
status:0,
zip: 200333,
image:'http://img1.2345.com/duoteimg/qqTxImg/2/5804bb86e3d62336.jpg%21200x200.jpg'
}, {
id: 42,
date: '2016-05-01',
level: '2',
name: '4444',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
status:0,
zip: 200333,
image:'http://img1.2345.com/duoteimg/qqTxImg/2/5804bb86e3d62336.jpg%21200x200.jpg'
},{
id: 43,
date: '2016-05-01',
level: '2',
name: '5555',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
status:0,
zip: 200333,
image:'http://img1.2345.com/duoteimg/qqTxImg/2/5804bb86e3d62336.jpg%21200x200.jpg'}]
}
];
```
其他属性跟 table 表格一致。
