<template>
    <div class="ht-base-tree-show-line-demo">
        <ht-base-tree :data="data" show-line :render="renderContent"></ht-base-tree>
    </div>
</template>

<script>
  export default {
      name: 'HtBaseTreeShowLineDemo',
      data () {
          return {
              data: [
                  {
                      title: '第一小节',
                      expand: true,
                      render: (h, { root, node, data }) => {
                          return h('span', {
                              style: {
                                  display: 'inline-block',
                                  width: '100%'
                              }
                          }, [
                              h('span', [
                                  h('ht-base-icon', {
                                      props: {
                                          type: 'LiRa_collapse2'
                                      },
                                      style: {
                                          marginRight: '8px'
                                      }
                                  }),
                                  h('span', data.title)
                              ])
                          ]);
                      },
                      children: [
                          {
                              title: '第一小节1-0',
                              expand: true,
                              children: [
                                  {
                                      title: '小节内容-01',
                                      expand: true
                                  },
                                  {
                                      title: '小节内容-02',
                                      expand: true
                                  }
                              ]
                          },
                          {
                              title: '第一小节1-1',
                              expand: true,
                              children: [
                                  {
                                      title: '小节内容-01',
                                      expand: true
                                  },
                                  {
                                      title: '小节内容-02',
                                      expand: true
                                  }
                              ]
                          }
                      ]
                  }
              ]
          }
      },
      methods: {
          renderContent (h, { root, node, data }) {
              return h('span', {
                  style: {
                      display: 'inline-block',
                      width: '100%'
                  }
              }, [
                  h('span', [
                      h('ht-base-icon', {
                          props: {
                              type: 'LiRa_work'
                          },
                          style: {
                              marginRight: '8px'
                          }
                      }),
                      h('span', data.title)
                  ]),
                  h('span', {
                      style: {
                          display: 'inline-block',
                          float: 'right',
                          marginRight: '32px'
                      }
                  })
              ]);
          }
      }
  }
</script>
<style>
    .ht-base-tree-show-line-demo {

    }
</style>

