phphe / virtual-list

Vue virtual list. Also supports horizontal list, virtual table, React.
https://virtual-list.phphe.com/
17 stars 2 forks source link

Adding Classes to the Inner Node #4

Open jpzbkk opened 4 months ago

jpzbkk commented 4 months ago

I am using tailwind and want to add classes not styles to the component where I am finding .vtlist-inner. For some reason using scss like below is not working

.vtlist-inner{
@apply table table-sm
}

I would love the ability to just add the classes directly to a prob. Your virtual list is the only one that actually seems to work on both firefox and chrome consistently and fast. The rest seem to be very bugged with firefox.

phphe commented 4 months ago

try this see if it work

.vtlist-inner{
background: red;
}
jpzbkk commented 4 months ago

I was able to get it to work, I had to remove "scoped" from the <style

<style lang="scss">
table.vtlist-inner {
  @apply table table-sm;
}
</style>

Also I added .table-pin-rows to the VirtualList class and everything works now. But if i added that class to where I apply the others inside the style tag, the pinning/fixed header does not work. That is a DaisyUI class which uses TailwindCSS. So it is all working now but this was surely an alternative way to do it.

  <VirtualList
    :items="books"
    table
    class="max-h-[70vh] table-pin-rows"
  >
phphe commented 4 months ago

ok