表格边框底部消失了吗？

Question

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

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

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

希望能帮助到你。

Answer 2

将display :flex用于list-view-item类，尝试以下代码。希望它对您来说很好。

.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;
}

Answer 3

尝试使用此CSS。 希望它对您有用。

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

Answer 4

.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;
}

Answer 5

我尝试更改js代码：

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

至 ：

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

并添加一个CSS到div类是列表视图：

transform:translateY(0)px;

然后边界显示出来。

不明白为何要执行此操作！