Akryum / vue-virtual-scroller

⚡️ Blazing fast scrolling for any amount of data
https://vue-virtual-scroller-demo.netlify.app
9.74k stars 915 forks source link

version1.1.2 do not use table tag ? #781

Open Create-Peace opened 1 year ago

Create-Peace commented 1 year ago

Describe the bug

I'm trying to implement virtual-table by using vue-virtual-scroller@1.1.2 。But I found vue-virtual-scroller doesnot surport table tag。

 <table>
      <colgroup>
        <col width="400">
        <col width="400">
        <col width="400">
      </colgroup>
      <RecycleScroller
        tag="table"
        :items="items"
        :item-size="42"
        list-tag="tbody"
        item-tag="tr"
        key-field="_id"
        page-mode
      >
        <template slot-scope="props">
          <td>{{ props.item.picture }}</td>
          <td>{{ props.item.name }}</td>
          <td>{{ props.item.company }}</td>
        </template>
      </RecycleScroller>
    </table>

After web page rendered,I found dom structure is not right.

<table>
    <colgroup>
        <col width="400">
        <col width="400">
        <col width="400">
    </colgroup>
    <div class="vue-recycle-scroller ready page-mode direction-vertical" tag="table">
        <!---->
        <tbody class="vue-recycle-scroller__item-wrapper" style="min-height: 208992px;">
            <tr class="vue-recycle-scroller__item-view" style="transform: translateY(0px) translateX(0px);">
                <td>http://placehold.it/32x32</td>
                <td>Compton Albert</td>
                <td>ZAPPIX</td>
            </tr>
            <tr class="vue-recycle-scroller__item-view" style="transform: translateY(42px) translateX(0px);">
                <td>http://placehold.it/32x32</td>
                <td>Daugherty Irwin</td>
                <td>VELITY</td>
            </tr>
            <tr class="vue-recycle-scroller__item-view" style="transform: translateY(84px) translateX(0px);">
                <td>http://placehold.it/32x32</td>
                <td>Hopkins Ramos</td>
                <td>EXOSPACE</td>
            </tr>
            <tr class="vue-recycle-scroller__item-view" style="transform: translateY(126px) translateX(0px);">
                <td>http://placehold.it/32x32</td>
                <td>Stanton Wilcox</td>
                <td>SURELOGIC</td>
            </tr>
            <tr class="vue-recycle-scroller__item-view" style="transform: translateY(168px) translateX(0px);">
                <td>http://placehold.it/32x32</td>
                <td>Savannah Guzman</td>
                <td>HARMONEY</td>
            </tr>
        </tbody>
        <!---->
        <div data-v-b329ee4c="" tabindex="-1" class="resize-observer">
            <object aria-hidden="true" tabindex="-1" type="text/html" data="about:blank"></object>
        </div>
    </div>
</table>

So What am I to do?

Reproduction

https://github.com/Akryum/vue-virtual-scroller/issues/new?assignees=&labels=to+triage&template=bug-report.yml

System Info

npm install

Used Package Manager

npm

Validations

awesomeYG commented 1 year ago

I have the same problem in version: 1.1.2

johandanforth commented 1 year ago

Me too. How are we supposed to generate a normal table with header and body?

Eviwang commented 1 year ago

Me too.

abdouthetif commented 1 year ago

RecycleScroller doesn't have a "tag" prop. You can only have "listTag" and "itemTag". The problem is that RecycleScroller create a div tag wrapping the listTag and the itemTag. It would be nice to do without this div tag and only use "listTag" and "itemTag" props