el-table表格添加具名插槽并传递数据
以下举例使用vite+vue3+element plus我在操作栏内,使用默认template获取了表格的行内数据scope操作栏内的按钮之类的需要自己来自定义这里是一个公共组件,增加了<slot name="dog"><slot>一个具名插槽<el-table :data="data.tableData" border style="width: 100%">
·
以下举例使用vite+vue3+element plus
我在操作栏内,使用默认template获取了表格的行内数据scope
操作栏内的按钮之类的需要自己来自定义
这里是一个公共组件,增加了<slot name="dog"><slot>一个具名插槽
<el-table :data="data.tableData" border style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
<el-table-column label="操作">
<template #default="scope">
<slot name="dog"></slot>
</template>
</el-table-column>
</el-table>
但是由于父组件使用这个组件时也会用到<template #dog></template>
<div class="container">
<Name>
<template #dog">
<el-button @click="getData(scope.row)">详情</el-button>
</template>
</Name>
</div>
这种情况是拿不到行内数据的,具体原因博主也不是很清楚,可能是由于template嵌套的原因
经过多番测试,最终改为了以下解决方案(不代表唯一解决方案,博主是自己测试出来的)
1.给子组件具名插槽绑定动态属性row
2.在父组件使用具名插槽时用scope来接收
这父组件的插槽内的按钮就可以拿到表格行内的数据了
子组件
<el-table :data="data.tableData" border style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
<el-table-column label="操作">
<template #default="scope">
<slot name="dog" :row="scope.row"></slot>
</template>
</el-table-column>
</el-table>
父组件
<div class="container">
<Name>
<template #dog="scope">
<el-button @click="fff(scope.row)">啊啊啊</el-button>
</template>
</Name>
</div>
更多推荐
已为社区贡献3条内容
所有评论(0)