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

Question

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

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

谢谢！

Answer 1

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

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

结果：

Answer 2

也许为时已晚，但是您可以在已安装的挂钩中搜索页脚的元素。然后将HTML与innerHTML附加在一起：

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

Answer 3

在插槽页脚中添加其他元素

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

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