Vuetify - 将字段添加到数据表页脚？答案

【问题标题】：Vuetify - add field to data table footer?Vuetify - 将字段添加到数据表页脚？
【发布时间】：2019-12-10 11:59:30
【问题描述】：

我想在 Vuetify 的数据表页脚左侧添加一个文本字段，如下所示。有谁知道如何做到这一点？

我知道可以隐藏页脚并构建自己的页脚，但我想要其余的默认功能。如果有人可以访问默认页脚代码，这也可以提供更简单的起点。

谢谢！

【问题讨论】：

你可能想extend the component

标签： vue.js vuetify.js

【解决方案1】：

通过使用页脚槽并将元素的位置设置为“绝对”，我能够获得您正在寻找的功能：

<template v-slot:footer>
    <v-checkbox style="position: absolute" class="pa-0 pl-2" label="Show Archived" hide-details />
</template>

结果：

【讨论】：

【解决方案2】：

也许为时已晚，但你可以在mounted hook中搜索footer的元素。然后用 innerHTML 附加 HTML：

mounted() {
    var footer = document.getElementsByClassName('v-data-footer')
    for (var i = 0; i < footer.length; i++) {
        footer[i].innerHTML += '<div>asad</div>'
    }
},

【讨论】：

【解决方案3】：

在插槽页脚中添加附加元素

 <template v-slot:footer>create your own text field here</template>

https://vuetifyjs.com/en/api/v-data-table/#slots

【讨论】：