SOURCE

var Main = {
  data() {
    return {
      tableData: [{
        name: 'test1',
        sex: '男',
        date: '2019-08',
        children: [
          {
            name: 'test2',
        		sex: '女',
        		date: '2019-08',
            children: [
              {
                name: 'test3',
                sex: '男',
                date: '2019-08',
              },
              {
                name: 'test11',
                sex: '男',
                date: '2019-08',
              }
            ]
          },
          {
            name: 'test7',
            sex: '女',
            date: '2019-08',
            children: [
              {
                name: 'test9',
                sex: '男',
                date: '2019-08',
              }
            ]
          }
        ]
      },
      {
        name: 'test4',
        sex: '男',
        date: '2019-08',
        children: [
          {
            name: 'test5',
        		sex: '女',
        		date: '2019-08',
          },
          {
            name: 'test15',
        		sex: '女',
        		date: '2019-08',
          }
        ]
      }]
    }
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->

<div id="app">
  <template>
    <div>
      <vxe-table
        :data="tableData"
        :tree-config="{children: 'children'}">
        <vxe-table-column type="seq"></vxe-table-column>
        <vxe-table-column field="name" title="Name" tree-node></vxe-table-column>
        <vxe-table-column field="sex" title="Sex"></vxe-table-column>
        <vxe-table-column field="date" title="Date"></vxe-table-column>
      </vxe-table>
    </div>
  </template>
</div>

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");