Html 桌子的边框底部消失了吗？

我尝试实现一个具有大数据量的表。然后由于性能问题，我只想在body窗口中渲染数据

但新的渲染元素边界将消失

HTML:

{{item.value+count}

JS:

const ListView={
名称：“ListView”，
模板：“#列表模板”，
道具：{
数据：{
类型：数组，
必填项：true
},
项目高度：{
类型：数字，
默认值：30
}
},
计算：{
contentHeight（）{
返回this.data.length*this.itemHeight+'px'；
}
},
安装的（）{
此.updateVisibleData（）；
},
数据（）{
返回{
visibleData:[]
};
},
方法：{
可更新数据（滚动顶部）{
scrollTop=scrollTop | | 0；
const visibleCount=Math.ceil（this.$el.clientHeight/this.itemHeight）；
const start=Math.floor（滚动顶部/this.itemHeight）；
const end=start+visibleCount；
this.visibleData=this.data.slice（开始、结束）；
this.$refs.content.style.transform=`translate3d（0，${start*this.itemHeight}px，0）`；
},
handleScroll（）{
const scrollTop=此。$refs.body.scrollTop；
此.updateVisibleData（scrollTop）；
}
}
};
新Vue({
组成部分：{
列表视图
},
数据（）{
常量数据=[]；
for（设i=0；i<1000；i++）{
data.push（{value:i}）；
}
返回{
数据
};
}
}).$mount（“#应用程序”）

代码示例：

您可以看到，只有第一次渲染的数据才能有边框

有人能帮忙吗

---

谢谢大家

使用

display:flex

对于

列表视图项

类，请尝试使用以下代码。希望它能很好地为您服务

.list-view-item {
  padding: 5px;
  color: #666;
  display: flex;
  flex-basis: 100%;
  flex-direction: row;
  line-height: 30px;
  box-sizing: border-box;
  border-bottom: 1px solid red;
}

---

试试这个CSS。我希望它对你有用

 .list-view-item {
    padding: 5px;
      color: #666;
      display:table;
      line-height: 30px;
      box-sizing: border-box;
      border-bottom: 1px solid green;
    }

---

表行组不适用于div。您可以更改整个布局并使用表，也可以这样做

.list-view-item {
        padding: 5px;
        color: #666;
        display: table;
        line-height: 30px;
        box-sizing: border-box;
        border-bottom: 1px solid red;
        min-width: 100vw;
    }

.list-view-item-col {
    display: table-cell;
    min-width: 50px;
}

对于表行组

---

希望能有帮助

我尝试更改js代码：

.list-view-item {
  padding: 5px;
  color: #666;
  display: flex;
  flex-basis: 100%;
  flex-direction: row;
  line-height: 30px;
  box-sizing: border-box;
  border-bottom: 1px solid red;
}

this.$refs.content.style.transform = `translateY(0, ${ start * this.itemHeight }px, 0)`;

致：

并将css添加到div类的列表视图中：

transform:translateY(0)px;

然后边界出现了

---

我不明白为什么这个行动会奏效

这个可以解决边界问题。但会使表列组调整宽度无效。我想保留表列以调整宽度。他为什么要这样做？他为什么要这样做？

this.$refs.content.style.transform = `translateY(0, ${ start * this.itemHeight }px, 0)`;

this.$refs.content.style.transform = `translateY(${ start * this.itemHeight }px)`;

transform:translateY(0)px;