来个大佬解下 vue组件

image.png

假设第一次获取后台数据 datas1 渲染了整个table,

然后根据点击展开的某一行,
比如第一行再去请求详情接口,
拿到详情数据datas2
请问如何将详情数据添加到展开行里面,
展开行是可以展开多个的

子组件

//  item 是第一次数据循环的当前对象
<button @click="handleClick(item)"></button>
 <tr>
    <slot name="info" v-bind:info="item" ></slot>
 </tr>
 
 this.$emit('handleGetInfo', item)

父组件

<table-component @handleGetInfo="handleGetInfo">
<template v-slot:info="{}" >
  <td colspan="9">
     要把详情添加到这
  </td>          
</template>
</table-component>


handleGetInfo (item) {
  //  去请求详情接口
}
阅读 1.8k
2 个回答

image.png
官网提供了事件展开,@expand-change="handleGetInfo"

handleGetInfo获取到的数据根据展开的index直接塞到tableData里面的数据看有没有响应

如果table数据不多的话,直接使用table的展开行就可以了
如果数据很多,建议使用树形数据与懒加载 ,element-ui官网有例子的

推荐问题