创建自定义组件 Vue.js

Question

我下载了 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>

这是我的自定义组件。 目前，我为扩展 function 手动创建了一个复制模板，它工作正常，但不仅看起来丑陋和多余，而且无法访问特定项目。 你有解决方案吗？

Answer 1

我找到了解决办法。 您在设置 function 中获得的插槽 object 将包含“父请求插槽”，即使它们未在模板中定义。

因此，您可以轻松地将插槽名称传递给模板，遍历它们并自动生成所需的插槽。

<script>

export default {
    setup(props, { slots }) {
        const themeColor = getComputedStyle(document.documentElement).getPropertyValue('--primary');

        const slotNames = Object.keys(slots)

        return { themeColor, slotNames }
    }
}
</script>

<template>
    <DataTable table-class-name="table-theme" :theme-color="themeColor" alternating>
        <template v-slot:[slot]="model" v-for="slot in slotNames">
            <slot :name="slot" v-bind="model"></slot>
        </template>
    </DataTable>
</template>

Answer 2

您真的不需要用自定义组件包装表格。

但不幸的是， vue3-easy-data.table不会随着更改themeColor而更新。

因此，快速而肮脏的解决方案是通过使用v-if销毁它来强制重新创建表。

这是游乐场（在整页中查看）

 const App = { components: { EasyDataTable: window['vue3-easy-data.table'], }, data () { return { themeColor: "#f48225", headers:[ { text: "Name", value: "name" }, { text: "Age", value: "age", sortable: true } ], items: [ { "name": "Curry", "height": 178, "weight": 77, "age": 20 }, { "name": "James", "height": 180, "weight": 75, "age": 21 }, { "name": "Jordan", "height": 181, "weight": 73, "age": 22 } ], } }, methods: { resetTable() { this.themeColor = null; } } }; Vue.createApp(App).mount('#app');

 <div id="app"> Theme Color: {{themeColor}}<br /><br /> <input type="radio" v-model="themeColor" value="#f48225" @input="resetTable"/> #f48225 <input type="radio" v-model="themeColor" value="#123456" @input="resetTable" /> #123456 <br /><br /> <easy-data.table v-if="themeColor:= null":headers="headers":items="items":theme-color="themeColor" buttons-pagination alternating /> </div> <link href="https.//unpkg.com/vue3-easy-data.table/dist/style:css" rel="stylesheet"> <script src="https.//cdn.jsdelivr.net/npm/vue@3.2.1/dist/vue.global:js"></script> <script src="https.//unpkg.com/vue3-easy-data.table"></script>