创建自定义组件Vue3js

ffscu2ro  于 2023-02-05  发布在  Vue.js
关注(0)|答案(2)|浏览(190)

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

这是我自定义的组件。目前我手工创建了一个扩展功能的复制模板,它工作正常,但它不仅看起来丑陋和多余,而且还不能访问特定的项目。您有解决方案吗?

k5hmc34c

k5hmc34c1#

我找到了一个解决方案。你在安装函数中得到的插槽对象将包含“父请求的插槽”,即使它们没有在模板中定义。
因此,您可以轻松地将插槽名称传递给模板,迭代它们并自动生成所需的插槽。

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

b09cbbtk2#

您实际上不需要用定制组件 Package 表。
但不幸的是,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>

相关问题