<template>
  <div>
    <Card shadow>
      树状表格组件tree-table-vue，基于<a href="https://github.com/MisterTaki/vue-table-with-tree-grid">vue-table-with-tree-grid</a>进行开发，修复了一些bug，添加了一些新属性
      <p><b>支持使用slot-scope进行自定义列渲染内容</b></p>
      <p>文档请看<a href="https://github.com/lison16/tree-table-vue">https://github.com/lison16/tree-table-vue</a></p>
      <tree-table expand-key="sex" :expand-type="false" :selectable="false" :columns="columns" :data="data" >
        <template slot="likes" slot-scope="scope">
          <Button @click="handle(scope)">123</Button>
        </template>
      </tree-table>
    </Card>
  </div>
</template>

<script>
export default {
    name: 'tree_table_page',
    data () {
        return {
            columns: [
                {
                    title: 'name',
                    key: 'name',
                    width: '400px'
                },
                {
                    title: 'sex',
                    key: 'sex',
                    minWidth: '50px'
                },
                {
                    title: 'score',
                    key: 'score'
                },
                {
                    title: 'likes',
                    key: 'likes',
                    minWidth: '200px',
                    type: 'template',
                    template: 'likes'
                }
            ],
            data: [
                {
                    name: 'Jack',
                    sex: 'male',
                    likes: ['football', 'basketball'],
                    score: 10,
                    children: [
                        {
                            name: 'Ashley',
                            sex: 'female',
                            likes: ['football', 'basketball'],
                            score: 20,
                            children: [
                                {
                                    name: 'Ashley',
                                    sex: 'female',
                                    likes: ['football', 'basketball'],
                                    score: 20
                                },
                                {
                                    name: 'Taki',
                                    sex: 'male',
                                    likes: ['football', 'basketball'],
                                    score: 10,
                                    children: [
                                        {
                                            name: 'Ashley',
                                            sex: 'female',
                                            likes: ['football', 'basketball'],
                                            score: 20
                                        },
                                        {
                                            name: 'Taki',
                                            sex: 'male',
                                            likes: ['football', 'basketball'],
                                            score: 10,
                                            children: [
                                                {
                                                    name: 'Ashley',
                                                    sex: 'female',
                                                    likes: ['football', 'basketball'],
                                                    score: 20
                                                },
                                                {
                                                    name: 'Taki',
                                                    sex: 'male',
                                                    likes: ['football', 'basketball'],
                                                    score: 10
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            name: 'Taki',
                            sex: 'male',
                            likes: ['football', 'basketball'],
                            score: 10
                        }
                    ]
                },
                {
                    name: 'Tom',
                    sex: 'male',
                    likes: ['football', 'basketball'],
                    score: 20,
                    children: [
                        {
                            name: 'Ashley',
                            sex: 'female',
                            likes: ['football', 'basketball'],
                            score: 20,
                            children: [
                                {
                                    name: 'Ashley',
                                    sex: 'female',
                                    likes: ['football', 'basketball'],
                                    score: 20
                                },
                                {
                                    name: 'Taki',
                                    sex: 'male',
                                    likes: ['football', 'basketball'],
                                    score: 10
                                }
                            ]
                        },
                        {
                            name: 'Taki',
                            sex: 'male',
                            likes: ['football', 'basketball'],
                            score: 10,
                            children: [
                                {
                                    name: 'Ashley',
                                    sex: 'female',
                                    likes: ['football', 'basketball'],
                                    score: 20
                                },
                                {
                                    name: 'Taki',
                                    sex: 'male',
                                    likes: ['football', 'basketball'],
                                    score: 10
                                }
                            ]
                        }
                    ]
                },
                {
                    name: 'Tom',
                    sex: 'male',
                    likes: ['football', 'basketball'],
                    score: 20
                },
                {
                    name: 'Tom',
                    sex: 'male',
                    likes: ['football', 'basketball'],
                    score: 20,
                    children: [
                        {
                            name: 'Ashley',
                            sex: 'female',
                            likes: ['football', 'basketball'],
                            score: 20
                        },
                        {
                            name: 'Taki',
                            sex: 'male',
                            likes: ['football', 'basketball'],
                            score: 10
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        handle (scope) {
            console.log(scope)
        }
    }
}
</script>

<style>

</style>
