我下载了DataTable组件vue3-easy-data-table
,然后创建了一个自定义组件来定义表的主题,由于easy-data-table使用槽来操作表项,我如何将模板标记重定向到表而不是自定义组件?
<script>
export default {
setup() {
const themeColor = getComputedStyle(document.documentElement).getPropertyValue('--primary');
return { themeColor }
}
}
</script>
<template>
<DataTable table-class-name="table-theme" :theme-color="themeColor" alternating>
<template #expand="item">
<slot name="expand" v-bind="item"></slot>
</template>
</DataTable>
</template>
<style lang="scss" scoped>
.table-theme {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
这是我自定义的组件。目前我手工创建了一个扩展功能的复制模板,它工作正常,但它不仅看起来丑陋和多余,而且还不能访问特定的项目。您有解决方案吗?
2条答案
按热度按时间k5hmc34c1#
我找到了一个解决方案。你在安装函数中得到的插槽对象将包含“父请求的插槽”,即使它们没有在模板中定义。
因此,您可以轻松地将插槽名称传递给模板,迭代它们并自动生成所需的插槽。
b09cbbtk2#
您实际上不需要用定制组件 Package 表。
但不幸的是,
vue3-easy-data-table
不会随着themeColor
的更改而更新。因此,快速而简单的解决方案是使用
v-if
销毁表,从而强制重新创建表。这里是操场(在全页中查看)