公司一个项目在用element ui2开发的时候，有个场景用的ele的树状表格，这个表格本身没什么，指定一个唯一键，row-key="id"，props映射:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"， 然而，树状结构却死活都出不来。就渲染了第一级，二级三级直接没了，困扰了我两三天后，我决定死马当成活马医，从官方搬了个示例到代码里，然后一点一点挪过去，结果就换了个:data，直接就渲染出来了
代码如下：
<!--自己写的-->
<el-table
:data="tableData1"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column
type="index"
header-align="center"
align="center"
label="序号"
width="50"
>
</el-table-column>
<el-table-column
prop="content"
header-align="center"
align="center"
label="考核分类"
>
</el-table-column>
<el-table-column
prop="content"
header-align="center"
align="center"
label="细则"
>
<template slot-scope="scope">
<span v-if="scope.row.main_id == 0"></span>
<span v-else>{{ scope.row.content }}</span>
</template>
</el-table-column>
<el-table-column
prop="start_date"
header-align="center"
align="center"
label="是否差异化"
>
<template slot-scope="scope">
<span v-show="scope.row.status == 0">否</span>
<span v-show="scope.row.status == 1">是</span>
</template>
</el-table-column>
<el-table-column
prop="recity_term"
header-align="center"
align="center"
label="整改时效"
>
</el-table-column>
<el-table-column
prop="count"
header-align="center"
align="center"
label="考核次数"
>
<template slot-scope="scope">
<span v-if="scope.row.count == -1">无限次</span>
<span v-if="scope.row.count && scope.row.count != -1"
>{{ scope.row.count }}次</span
>
<span v-if="!scope.row.count">/</span>
</template>
</el-table-column>
<el-table-column
prop="recity_term"
header-align="center"
align="center"
label="数据来源"
>
</el-table-column>
<el-table-column
prop="recity_term"
header-align="center"
align="center"
label="销分规则"
>
</el-table-column>
<el-table-column
prop="recity_term"
header-align="center"
align="center"
label="超时处罚"
>
<template slot-scope="scope">
<span v-show="scope.row.status == 0">不加倍</span>
<span v-show="scope.row.status == 1">加倍扣</span>
</template>
</el-table-column>
<el-table-column
prop="score"
header-align="center"
align="center"
label="分值"
>
</el-table-column>
<el-table-column header-align="center" align="center" label="操作">
<template slot-scope="scope">
<el-button
v-show="scope.row.main_id == 0"
@click="updateRule(scope.row)"
size="small"
type="warning"
>大类编辑</el-button
>
<el-button
v-show="scope.row.main_id == 0"
type="success"
@click="addSamllRule(scope.row.id)"
size="small"
>新增细则</el-button
>
<el-button
v-show="scope.row.main_id == 0"
type="danger"
size="small"
@click="delRulle(scope.row.id)"
>大类删除</el-button
>
<el-button
v-show="scope.row.main_id != 0"
type="warning"
size="small"
>细则编辑</el-button
>
<el-button
v-show="scope.row.main_id != 0"
type="dnager"
size="small"
@click="delSmallRule(scope.row.id)"
>细则删除</el-button
>
</template>
</el-table-column>
</el-table>
<!--从官网搬过来的-->
<el-table
:data="tableData1"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column
type="index"
header-align="center"
align="center"
label="序号"
width="50"
>
</el-table-column>
<el-table-column
prop="content"
header-align="center"
align="center"
label="考核分类"
>
</el-table-column>
<el-table-column
prop="content"
header-align="center"
align="center"
label="细则"
>
<template slot-scope="scope">
<span v-if="scope.row.main_id == 0"></span>
<span v-else>{{ scope.row.content }}</span>
</template>
</el-table-column>
<el-table-column
prop="start_date"
header-align="center"
align="center"
label="是否差异化"
>
<template slot-scope="scope">
<span v-show="scope.row.status == 0">否</span>
<span v-show="scope.row.status == 1">是</span>
</template>
</el-table-column>
<el-table-column
prop="recity_term"
header-align="center"
align="center"
label="整改时效"
>
</el-table-column>
<el-table-column
prop="count"
header-align="center"
align="center"
label="考核次数"
>
<template slot-scope="scope">
<span v-if="scope.row.count == -1">无限次</span>
<span v-if="scope.row.count && scope.row.count != -1"
>{{ scope.row.count }}次</span
>
<span v-if="!scope.row.count">/</span>
</template>
</el-table-column>
<el-table-column
prop="recity_term"
header-align="center"
align="center"
label="数据来源"
>
</el-table-column>
<el-table-column
prop="recity_term"
header-align="center"
align="center"
label="销分规则"
>
</el-table-column>
<el-table-column
prop="recity_term"
header-align="center"
align="center"
label="超时处罚"
>
<template slot-scope="scope">
<span v-show="scope.row.status == 0">不加倍</span>
<span v-show="scope.row.status == 1">加倍扣</span>
</template>
</el-table-column>
<el-table-column
prop="score"
header-align="center"
align="center"
label="分值"
>
</el-table-column>
<el-table-column header-align="center" align="center" label="操作">
<template slot-scope="scope">
<el-button
v-show="scope.row.main_id == 0"
@click="updateRule(scope.row)"
size="small"
type="warning"
>大类编辑</el-button
>
<el-button
v-show="scope.row.main_id == 0"
type="success"
@click="addSamllRule(scope.row.id)"
size="small"
>新增细则</el-button
>
<el-button
v-show="scope.row.main_id == 0"
type="danger"
size="small"
@click="delRulle(scope.row.id)"
>大类删除</el-button
>
<el-button
v-show="scope.row.main_id != 0"
type="warning"
size="small"
>细则编辑</el-button
>
<el-button
v-show="scope.row.main_id != 0"
type="dnager"
size="small"
@click="delSmallRule(scope.row.id)"
>细则删除</el-button
>
</template>
</el-table-column>
</el-table>
找了半天也没找到有什么不一样，希望路过的大佬给看看问题出在哪
新发现，把上面那个没效果的删掉，下面那个就会也失去树状结构效果，只能把上面那个的display设置为none，下面那个才能用，真是见了鬼了
