vue通过v-for出来的table的tr怎么做展开

Question

vue table这种可以展开的效果怎么做
element-ui的https://element.eleme.cn/#/zh... 展开行
我看是通过v-if tr做到的 但是怎么在v-for出来的tr中再插入tr的

Answer 1

ViewModel 的优雅之处就在于数据视图，UI 跟着数据变动。

所有你只需要在你的 list 对应的位置再插入一行，通过 expand 字段来标记展示或者不展示就行了。类似：

[
    { data: 'normal data' },
    { data: 'normal data2' }
]

插入两条数据，变成如下结构：

[
    { type: 'normal', data: 'normal data' },
    { type: 'expand', data: 'expand data', expand: false },
    { type: 'normal', data: 'normal data2' },
    { type: 'expand', data: 'expand data2', expand: true }
]

Answer 2

你问的是如何tr后面插入tr,那默认你是知道如何在组件 自定义渲染数据了（一种是render,一种是slot-scope），仅仅针对你最后一句回答。
看了下element 源码：
整个table 是通过render出来的 其中tr分了几种情况。

链接描述

Answer 3

那个不是td下的form吗

Answer 4

还是在数据层做更改