vue.js 如何将模板注入插槽

cotxawn7  于 2023-03-24  发布在  Vue.js
关注(0)|答案(2)|浏览(282)

在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>

现在,在组件中,我想为组件外部提供的模板中的每一行添加一个复选框。这可能吗?如何实现?

pn9klfpd

pn9klfpd1#

是的,这是可能的,但很复杂。你需要手动处理你的插槽,然后使用Vue Render Functions再次渲染它们。
例如,检查How to clear "Slot 'default' invoked outside of the render function" warning? Vue3, Composition API如何处理组件中传递的插槽。
工作量很大。我建议你重新考虑一下你的设计。
查看流行的Vue库,如QuasarVuetifyPrimeVueElement+如何设计表。
它们主要将数据传递给表组件并为单元格提供槽。

e4eetjau

e4eetjau2#

对于Vue 2,可以使用v-bind="”和示例:

<slot name="tbod`enter code here`y" v-bind="{ checkbox: true }"></slot>

并使用id添加一个字段,类似于:

<td v-if="checkbox">
  <input type="checkbox" :value="employee.id" v-model="selectedEmployees">
</td>

并添加selectedEmployees数据属性以存储所有选定的雇员ID

相关问题