Question

当我向右滚动时，我的桌子有问题这是我的代码

TableComponent.vue

<div id="main-container">
    <table class="maint-table">
        <thead id="table-header">
            <tr>
                <th class="dates">&nbsp;</th>
                <th v-for="data in dateHeader">{{data}}</th>
            </tr>
            <tr>
                <th class="title">&nbsp;</th>
                <th v-for="data in dayOfWeek">{{data}}</th>
            </tr>
        </thead>
        <tbody id="table-body" @scroll="fixedScroll">
            <table_block :table_data="dataHeader"></table_block>
            <table_block :table_data="allData"></table_block>
        </tbody>
    </table>
</div>
...
...
...
<script>
    components: {
        table_block
    },
    methods: {
        fixedScroll() {
            fixedScroll(event) {
            var thead = document.getElementById("table-header");
            var tbodyScroll = document.getElementById("table-body").scrollLeft;
            thead.scrollLeft = tbodyScroll;
        }
</script>

我做了一个props，将数据传递到我的 TableBlock ，以遍历数据并将其显示在表上。这是我的TableBlock代码。

TableBlock.vue

<template>
    <div>
        <tr v-for="row in table_data">
            <td>
                <div class="drop-down-container"><span class="drop-down-controller"">{{ row.title }}</span></div>
            </td>
            <td v-for="cel in row.data" class="group-header">{{ cel }}</td>
        </tr>
    </div>
</template>

当我向右滚动时，第一列必须冻结，但不是。我尝试在 TableComponent.vue 中使用普通的HTML表创建虚拟数据，而没有使用道具将数据传递给另一个组件，它工作得很好。但是当我使用这些代码时，它无法正常工作。

场景假设我的表格中有10列，当我向右滚动时，第1列会保持正常，但是当第10列到达第1列时，第1列将与第10列一起滚动。

我正在尽力说明这种情况，但这是我所能做的最好的。如果有人可以帮助，请帮助我。

使用Vue JS修复HTML表上的列

0 个答案: