Фиксированный столбец в таблице HTML с Vue JS - PullRequest
Новая
       24

Фиксированный столбец в таблице HTML с Vue JS

0 голосов
/ 20 сентября 2018

У меня проблема с таблицей, когда я прокручиваю вправо, это мой код

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-м столбцом.

Я стараюсь изо всех сил иллюстрировать сценарий, но это лучшее, что я могу сделать,Если кто-то может помочь, пожалуйста, помогите мне.

...