創建自定義組件 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>