html - 表格边框底部消失了吗？

Question

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

但是新的渲染元素边框消失了。

HTML:

<script src="//unpkg.com/vue@2.5.15/dist/vue.js"></script>
<script type="text/x-template" id="list-template">
  <div class='table-body' ref="body" @scroll="handleScroll">
    <div class="list-view">
      <div     
        class="list-view-phantom"       
        :style="{
           height: contentHeight
        }">
      </div>
      <div class="list-view-colgroup">
         <div class="list-view-item-col-g" v-for='count in 5'>
         </div>
      </div>
      <div
        ref="content"
        class="list-view-content">
        <ul
          class="list-view-item"
          :style="{
            height: itemHeight + 'px'
          }"
          v-for="item in visibleData" :key='item.value'>
         <li class="list-view-item-col" v-for='count in 5'>
          {{item.value+count}}
         </li>
            </ul>
        </div>
        </div>
  </div>
</script>
<div id="app">
  <template>
    <list-view :data="data"></list-view>
  </template>
</div>

JS:

const ListView = {
    name: 'ListView',

  template: '#list-template',

    props: {
    data: {
        type: Array,
      required: true
    },

    itemHeight: {
      type: Number,
      default: 30
    }
  },

  computed: {
    contentHeight() {
        return this.data.length * this.itemHeight + 'px';
    }
  },

  mounted() {
    this.updateVisibleData();
  },

  data() {
    return {
      visibleData: []
    };
  },

  methods: {
    updateVisibleData(scrollTop) {
        scrollTop = scrollTop || 0;
        const visibleCount = Math.ceil(this.$el.clientHeight / this.itemHeight);
      const start = Math.floor(scrollTop / this.itemHeight);
      const end = start + visibleCount;
      this.visibleData = this.data.slice(start, end);
      this.$refs.content.style.transform = `translate3d(0, ${ start * this.itemHeight }px, 0)`;
    },

    handleScroll() {
      const scrollTop = this.$refs.body.scrollTop;
      this.updateVisibleData(scrollTop);
    }
  }
};

new Vue({
  components: {
    ListView
  },

  data() {
    const data = [];
    for (let i = 0; i < 1000; i++) {
      data.push({ value: i });
    }

    return {
      data
    };
  }
}).$mount('#app')

代码示例:

https://jsfiddle.net/441701328/hq1ej6bx/6/

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

有人能帮忙吗？

谢谢大家!!!

Answer 1

table-row-group 不适用于 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;
}

jsfiddle对于表行组

希望对您有所帮助。