Question

我有这个表，我用来智能地渲染超过4000条记录，但我想知道如何以一种没有任何延迟的方式来做。我使用了一个性能录制，所以我可以看到内存是如何使用的，我最终得到了这个。

这实际上比我之前更加优化，并且我通过有条件地渲染除了每行中的第一个td以便保持滚动高度来实现这一点，但也减少了节点的数量。正在迭代。有什么方法可以进一步优化这个吗？

这是我的Vue模板

<template>
<div class="table-container" >
    <div class="table-header" ref="tableHead">
        <table class="data-table" border="0">
            <thead>
                <tr>
                    <th
                        v-for="(head, index) in contents.order"
                        :key="index"
                        class="col"
                        :class="contents.stickyCols.indexOf(head) === 0 ? 'sticky-left' : contents.stickyCols.indexOf(head) === 1 ? 'sticky-right' : ''"> {{ head }}
                    </th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="table-body" ref="tableBody" @scroll="changeScrollVal" :style="'height: ' + height + ';'">
        <table id="bodytable" width="100%" cellpadding="5" cellspacing="5">
            <tbody>
                <tr
                    v-for="(row, idx) in theData"
                    :key="idx">
                    <td
                        :class="contents.stickyCols.indexOf(key) === 0 ? 'sticky-left' : contents.stickyCols.indexOf(key) === 1 ? 'sticky-right' : ''"
                        :style="contents.colorCols.indexOf(key) > -1 ? 'color:' + contents.colorRefs[row[contents.colorRefs.label]] : '' "
                        class="body-cell col"
                        v-for="(key, index) in contents.order"
                        v-if="idx >= (scrollBottom / 6 - 100 < 0 ? 0 : scrollBottom / 6 - 100) && idx <= scrollBottom - 1 || key === contents.order[0]"
                        :key="index"
                        >{{ row[key] }}
                    </td>
                </tr>
            </tbody>
                                       <!-- > {{ row[key] }} -->                   
        </table>
    </div>
</div>

<script>
export default {
props: ['contents', 'dashData', 'height'],
data () {
    return {
        theData: [],
        scrollBottom: 100
    }
},
methods: {
    changeScrollVal (e) {
        this.$refs.tableHead.scrollLeft = e.target.scrollLeft
        this.scrollBottom = Math.floor(this.$refs.tableBody.scrollTop / 9 < 100 ? 100 : this.$refs.tableBody.scrollTop / 9 > this.dashData.length - 1 ? this.dashData.length - 1 : this.$refs.tableBody.scrollTop / 9)
        this.theData = this.dashData.slice(0, this.scrollBottom)
    }
},
mounted () {
    this.theData = this.dashData// .slice(0, 17)
}
}
</script>

<style lang="scss">
table
{
border-collapse: collapse;
}

td, th {
border-bottom: 1px solid rgba(0,0,0,0.2);
margin-bottom: 2px;
}

.sticky-right {
position: sticky;
background: white;
right: 0;
padding-left: 20px!important;
}

.sticky-left {
position: sticky;
background: white;
left: 0;
}

.outer-container
{
background-color: #ccc;
position: absolute;
top:0;
left: 0;
right: 300px;
bottom: 40px;
}

.inner-container
{
height: 100%;
overflow: hidden;
}

.table-header
{
position: relative;
&::-webkit-scrollbar {
    display: none;
}
}
.table-body
{
overflow: scroll;
display:inline-block;
width: 79vw;
}

.table-header {
overflow: scroll;
width: 79vw;
}

th
{
background-color: white;
text-align: left;
height: 40px;
}
.body-cell 
{
text-align: left;
color: rgba(0,0,0,0.6);
padding-top: 10px;
padding-bottom: 10px;
}

.col
{
width:120px;
min-width: 265px;
max-width: 265px;
padding-left: 0px;
padding-right: 0px;
font-weight: 500;
// background-color: white;
}
</style>

谢谢！

如何优化大数据表VueJS

0 个答案: