elementUI实现表格树形结构

效果：
html代码：

<el-table
          :data="tableData"
          style="width: 100%" :row-class-name="getRowClassName">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form style="width: 100%;">
                <el-form-item>
                  <el-table style="width: 100%;background: none" :data="props.row.children">
                    <el-table-column label="跳转至" prop="link">

                    </el-table-column>
                    <el-table-column label="访问页面备注名称" prop="page">
                    </el-table-column>
                    <el-table-column label="跳转次数" prop="num">
                    </el-table-column>
                    <el-table-column label="占比" prop="proportion">
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="访问页面"
            width="180">
            <template slot-scope="scope">
              <div class="access">
                //scope.$index 是当前行的index
                <div class="index">{{scope.$index + 1}}</div>
                <span>{{scope.row.accessPage}}</span>
              </div>

            </template>
          </el-table-column>
          <el-table-column
            prop="pageRemarks"
            label="页面备注"
            width="180">
          </el-table-column>
          <el-table-column
            prop="visitsNum"
            label="访问次数">
          </el-table-column>
          <el-table-column
            prop="visitsPercentage"
            label="访问次数占比">
          </el-table-column>
          <el-table-column
            prop="residenceTime"
            label="平均停留时间">
          </el-table-column>
          <el-table-column
            prop="accessTime"
            label="平均访问时间">
          </el-table-column>
        </el-table>

css代码：

.row-expand-cover .el-table__expand-icon {
      visibility: hidden;
    }

js代码：

data(){
    return{
        tableData: [{
          id: 1,
          accessPage: '百度',
          pageRemarks: '百度到你想要的！',
          visitsNum: '1111',
          visitsPercentage: '96%',
          residenceTime: '59s',
          accessTime: '100s',
          children: [{
            id: 11,
            link: 'www.baidu.com',
            num: '12',
            page: '在线词条',
            proportion: '10%'
          }, {
            id: 12,
            link: 'www.taobao.com',
            num: '100000',
            page: '在线词条',
            proportion: '110%'
          }],
        }, {
          id: 2,
          accessPage: '淘宝',
          pageRemarks: '赢在晒场！',
          visitsNum: '5亿',
          visitsPercentage: '99%',
          residenceTime: '3h',
          accessTime: '10h',
        }, {
          id: 3,
          accessPage: '京东',
          pageRemarks: '京东好物',
          visitsNum: '2亿',
          visitsPercentage: '92%',
          residenceTime: '1h',
          accessTime: '2h',
        }, {
          id: 4,
          accessPage: '马蜂窝',
          pageRemarks: '走遍 玩遍 看遍',
          visitsNum: '100',
          visitsPercentage: '70%',
          residenceTime: '3h',
          accessTime: '4h',
        }]
    }
},
methods:{
    getRowClassName({row, rowIndex}) {//有children就显示箭头
        if (!row.children) {
          return 'row-expand-cover';
        }
      },
},