如何解决在“ v-data-table”标头中添加“ v-text-field标头”,以进行基于列的搜索 目标:当前设置:
目标:
我打算将自定义搜索添加到我的import pickle
class Human:
def __init__(self,name):
self.name = name
name = open("filepath").read()
h = Human(name)
p = pickle.dumps(h)
unpickledhuman = pickle.loads(p)
中,该搜索将按列进行过滤。例如,如果我有桌子
v-data-table
我想在ID | Name | Age
和v-text-field
标头中添加Name
,以在这两个列上启用自定义过滤。
当前设置:
可以通过向Age
这样添加模板来轻松实现
v-data-table
问题:
此解决方案确实有效,但看起来并不完美
这是codepen中的样子
可以清楚地看到,字体比默认标题大,并且“排序箭头”已经向下移动了一行。
现在,我正在寻找一种解决方案,如何使自定义<template v-slot:header.name="{ header }">
<v-text-field
:label="header.text"
>
</v-text-field>
</template>
标题看起来像其他默认标题一样。
我的假设是我必须使用CSS进行样式设置,但不确定。
任何朝着正确方向的指针将不胜感激! ☺
解决方法
此可怕的CSS将起作用:
thead.v-data-table-header > tr > th > div{
display:inline-block;
width:90%;
}
thead.v-data-table-header > tr > th > div.v-input label{
font-size:12px
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。