What are the best practices for integrating vue-virtual-scroller with Element UI Table?

I am currently using Element UI Table in my project and I am trying to incorporate vue-virtual-scroller with it.

I have encountered a challenge because all the virtual scroller examples I've come across expect the loop to be run on the list item or table row element / component.

However, with Element UI, the rows are rendered implicitly based on the column components passed to the default slot of el-table.

For example:

<el-table
  :data="tableData"
  style="width: 100%">
  <el-table-column
    prop="date"
    label="Date"
    width="180">
  </el-table-column>
  <el-table-column
    prop="name"
    label="Name"
    width="180">
  </el-table-column>
<el-table>

This setup has left me unsure about how to control the row rendering or wrap a row inside a virtual scroller.

Is there any workaround for this, or should I look into using another table library that allows row-based rendering?

javascriptvue.jselement-uivirtualscroll

Answer №1

If you're looking for an alternative, check out the infiniteScroll component. It's worth noting that Vue-virtual-scroller doesn't offer support for the table tag either.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for implementing a fallback image in Material UI?

Hey there! I'm currently looking to customize the fallback image of a Material UI Avatar with my own original image. Does anyone have any tips on how I can achieve this? const fallbackImage = "../../fallback/img.png" const AvatarWithBadge = ...

javascriptreactjsmaterial-ui

Picture is unavailable for viewing - (Express, Pugjs)

I'm having trouble getting an image to display on my page using a pug template. Despite following the setup and files correctly, the image still isn't showing up. Here is what I have: index.js app.use('/images', express.static(path.r ...

javascriptexpresspugpugjs

Placing a hyperlink within template strings

Currently, I am working on implementing a stylish email template for when a user registers with their email. To achieve this, I am utilizing Express and Node Mailer. Initially, my code appeared as follows: "Hello, " + user.username + ",&bs ...

javascriptexpressnodemailertemplate-literals

There are no documents found with the specified UUID in MongoDB

I have been attempting to retrieve a specific document from MongoDB that includes the field "ownerId" containing a binary UUID. In the Mongo console, when I run the command db.dataset.find({ownerId: BinData(3,"ZQ6EAOKbQdSnFkRmVUUAAA==")}).pretty() The ou ...

javascriptnode.jsmongodbmongoskin

Problem with input field borders in Firefox when displayed within table cells

Demo When clicking on any cell in the table within the JSFiddle using Firefox, you may notice that the bottom and right borders are hidden. Is there a clever solution to overcome this issue? I have experimented with a few approaches but none of them work ...

javascripthtmlcss

The browser automatically adds a backslash escape character to a JavaScript object

When attempting to send an MQTT message to a topic from my angular app, the message needs to be in a specific syntax: { "Message": "hello" //the space after : is mandatory } However, upon sending the message in the correct format, the browser aut ...

javascriptjsonangularmqtt

What is the simplest method for invoking a C# function from JavaScript?

I am facing an issue with a LinkButton control in my project. I need to attach a c# method to it, but when I add the control to the page using parse control function, it changes the call to javascript and results in an undefined error. I have been trying t ...

c#asp.netjavascriptdotnetnuke

Add buttons to images to provide further explanations

While browsing the Excel Learn website, I came across a picture that displayed buttons explaining various functions in Excel. By clicking on the picture, a menu would open up to further explain the corresponding button. If you want to see this in action, ...

javascripthtmlcss

Deliver data in batches of ten when the endpoint is accessed

I am currently in the process of developing a web application using Next.JS and Node. As part of this project, I have created my own API with Node that is being requested by Next.JS. One particular endpoint within my API sends data to the front end as an ...

javascriptnode.jsreactjsapinext.js

Incorrect sequencing in Chart.js chart with time displayed on the horizontal axis

Hey there, I'm currently working on displaying some data using chart.js in angularjs. However, I seem to be facing an issue with the ordering of my data which is resulting in a strange looking chart like this: https://i.stack.imgur.com/F6phH.png Her ...

javascriptangularjs

Can you explain the purpose of useEffect in React?

As a beginner in learning React, I have been able to grasp the concept of the useState hook quite well. However, I am facing some difficulties understanding the useEffect hook. I have tried looking through the documentation, searching online, and even wat ...

javascriptreactjsreact-hooks

A 403 error is thrown by the Microsoft Graph API when attempting to delete the authentication method known as "Microsoft Authenticator"

I'm trying to remove a user's Microsoft Authenticator Authentication Method (#microsoft.graph.microsoftAuthenticatorAuthenticationMethod) from their list of authentication methods, but I keep getting a 403 Forbidden error. Below is the code snip ...

javascriptnode.jsmicrosoft-graph-api

Text input field with uneditable text displayed at the end

Click here to view the input field I am looking to create an input field that always displays a "%" at the end of the input. Here is what my react component looks like currently: <StyledBaseInput type="text" ...

javascriptcssreactjsinput

Discover the method to retrieve every element from a Listbox with the click of a Button and utilizing an ajax call

How can I retrieve all the elements from a Listbox when a Button Click event triggers an ajax call? I have created a function that successfully returns all the elements from the Listbox. However, when I try to bind it with the ajax call, it doesn't w ...

javascriptjqueryjquery-uikendo-uijquery-ajaxq

What is the best way to manage data in a single-page application and retrieve it after the page has been refreshed?

Lately, I’ve encountered an issue with data storage in a single-page application. I’m seeking some guidance on how to effectively store data and retain it after refreshing the page within a Single Page Application. As an example, let's say I hav ...

javascriptlocal-storagesingle-page-applicationvue.js

Running into the error message 'TypeError: Cannot invoke a class as a function' while utilizing Ziggy for Vue within Laravel

I have been searching endlessly for a solution to my issue without any luck. Here are the steps I have taken: \\Webpack.mix.js const mix = require('laravel-mix'); const path = require('path'); mix.webpackConfig({ resolve: ...

laravelvue.jsvuejs2

Showing every piece of information line by line while uploading an AJAX CSV file

I have successfully parsed a CSV file using Papaparse, Jquery AJAX, and PHP. Now, I want to display the data line by line while the CSV file is being uploaded. Here is a snippet of my code: var xhr_file = null; $('#fileVariants').change(functio ...

javascriptphpjqueryajaxpapaparse

What causes the text field and checkbox to move downward as I enter text?

I'm currently working on a mock login page using React and Material UI. I implemented a feature where the show/hide password icon only appears when the user starts typing in the password field. However, after making this change, I noticed that the pas ...

javascriptreactjsmaterial-ui

Achieving dynamic serving of static files using Rollup and integrating seamlessly with node-resolve

Currently, I am in the process of building a library using TSDX, which is a powerful CLI tool for package development based on Rollup. My project involves a collection of country flags SVGs that need to be imported and displayed dynamically when required. ...

javascriptreactjstypescriptrolluprollupjs

What steps should I follow to obtain the return value after invoking these functions?

I have a task that requires creating a nodejs script for two specific functions: Retrieve my public IP address. Update my public IP address on my freenom.com account for a registered domain. Currently, I have two separate scripts in place to accompl ...

javascriptnode.jsrequestip