在vue2.7中我有一个表组件
<template>
<table>
<tbody>
<slot name="tbody"></slot>
</tbody>
</table>
</template>
像这样使用这个组件:
<my-table>
<template #tbody>
<tr v-for="employee in employees" :key="employee.id">
<td>{{ employee.name }}</td>
<td>{{ employee.occupation }}</td>
</tr>
</template>
</my-table>
现在,在组件中,我想为组件外部提供的模板中的每一行添加一个复选框。这可能吗?如何实现?
2条答案
按热度按时间pn9klfpd1#
是的,这是可能的,但很复杂。你需要手动处理你的插槽,然后使用Vue Render Functions再次渲染它们。
例如,检查How to clear "Slot 'default' invoked outside of the render function" warning? Vue3, Composition API如何处理组件中传递的插槽。
工作量很大。我建议你重新考虑一下你的设计。
查看流行的Vue库,如Quasar,Vuetify,PrimeVue,Element+如何设计表。
它们主要将数据传递给表组件并为单元格提供槽。
e4eetjau2#
对于Vue 2,可以使用v-bind="”和示例:
并使用id添加一个字段,类似于:
并添加selectedEmployees数据属性以存储所有选定的雇员ID