elementUi 2.11.0版本table组件踩坑日记

type="expand" 踩坑记
因为业务的需要把element-ui从2.4.11升级到2.11.0后el-table组件遇到的一个坑。 type="expand" 和新增的属性tree-props 属性的冲突 因为前面版本没有tree-props这个属性所以当时做的二级表是使用type="expand" 数据结构返回为 [id:1,name:1,children:[]]；由于一些特殊处理使用了row-key这个属性 然后升级后神奇的事情就发生了由于tree-props是默认有值的只要row-key存在值则生效 并且由于row-key 的优先级大于type="expand" 这个时候就会导致type="expand"需要展示的二级内容无法展示 但是图标还存在 就导致多个展开图标；此时两个解决方法 一个是修改数据结构 把children重命名一下 一个是重置tree-props的值 把里面的children属性值更改掉即可

<el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
    :tree-props="{children: 'childsxxxxx', hasChildren: 'hasChildren'}">
</el-table>