vue如何设置和修改原生html的table内的tr标签的高度?

发布于 2022-09-13 01:11:37 字数 782 浏览 24 评论 0

使用vue设置和修改table内的tr的高度

这里的表格是原生html的那个table标签,不是element ui里的数据表格el-table。

表格通过template的v-for循环渲染
html 模板:

<template v-for="item in table">
  <tr :heigth="item.heigth==null?table_Rowheigth:item.heigth"><td>{{item.value}}</td></tr>
</template>

json格式如下:

table_Rowheigth:"30px"
table:[
    {
        value:"test"
        heigth:"50px"
    },
    {
        value:"test"
        heigth:"60px"
    },
        {
        value:"test"
    }

]

如果绑定的json集合中,一个行的数据项有heigth属性,就根据heigth设置该行数据对应行的显示高度,如果行数据没有heigth属性,行数据对应的行的高度配置,设置为table_Rowheigth。
例如以上代码示例中,第三个数据对应的行高度没有显式设置,显示的期待高度是table_Rowheigth的值,也就是30px

但上述那个vue的for循环的html模板不行,如何解决?或者有其他的设置方法?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

悟红尘 2022-09-20 01:11:37

我寻思不是height吗

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文