A guide on displaying an array object in a table column using Vue.js and Element UI

Having issues with rendering array data in Vue Js Element UI using the el-table-column element. The string data displays correctly, but I'm facing problems with the array data. I've attempted to include static data within the data() return method, but it's not yielding the desired results. Below is the code snippet showing what I've tried:

HTML

<el-table :data="tableData" style="width: 100%">

    <el-table-column prop="module" label="Module">
    </el-table-column>
    <el-table-column prop="status" label="Status">
    </el-table-column>
    <el-table-column prop="downloadfiles" label="Download Files"
                     v-for="(download,index) in tableData[0].downloadfiles[0]">
      <el-table-column label="File" :prop="download.file"></el-table-column>
      <el-table-column label="Path" :prop="JSON.stringify({download, property:'path'})"></el-table-column>
    </el-table-column>
  </el-table>

Script

data () {
    return {
      tableData: [{
        "module": 'Order',
        "status": "Ok",

        "downloadfiles":
          [{
            "file": "test_20210406080352.zip",
            "path": "/opt/var/log/download/"
          },
            {
              "file": "New_20210406080352.zip",
              "path": "/opt/var/log/download/"
            }]
      }],
    }
  }

I've attempted different approaches to parse the download node data without success. Any insights on how to properly traverse the array object within el-table-column would be appreciated.

javascriptarraysvue.jsvue-componentelement-ui

Answer №1

Here, you are specifically choosing the first item in the downloadfiles array using tableData[0].downloadfiles[0], but that is not the correct approach.

The correct way to handle this situation is explained below:

  <el-table-column
    prop="downloadfiles"
    label="Download Files"
    v-for="(d, i) in tableData[0].downloadfiles" 
    :key="i"
  >
    <el-table-column label="File">
      {{ d.file }}
    </el-table-column>
    <el-table-column label="Path">
      {{ d.path }}
    </el-table-column>
  </el-table-column>

You can view a full example here.

If you do not require subcolumns, an alternative solution would be to utilize scoped slot in the table column.

For instance:

  <el-table-column label="Download Files">
    <template slot-scope="props">
      <div
        v-for="(f, i) in props.row.downloadfiles"
        :key="i"
      >
        <el-link
          :href="f.path + f.file"
          icon="el-icon-download"
          type="primary"
        >
          {{f.file}}
        </el-link>
      </div>
    </template>
  </el-table-column>

You can find a complete example here.

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

Browse through different states by clicking on the <a> </a> tag

Is there a way to switch between states defined by $stateProvider when clicking on the <a> </a> tag? Below are the states I have set up: $stateProvider //region page States .state('page1', { url: "/pg1", ...

javascriptangularjsangularjs-scopeangular-ui-router

Stop ajax request when select2 is clicked

Is there a way to change the ajax call behavior in select2 drop down items so that it only retrieves data when I start typing in the search box, and not on click of the element? Your guidance on this issue would be highly appreciated. $("#ddlItems").sel ...

javascriptjqueryjquery-select2

Experiencing difficulties with a click event function for displaying or hiding content

Struggling with implementing an onClick function for my two dynamically created components. Currently, when I click on any index in the first component, all content is displayed. What I want is to show only the corresponding index in the second component ...

javascripttypescriptstenciljs

The functionality of a Google chart is determined by the value of the AngularJS $scope

I recently started working with AngularJS and Google charts. I've successfully created a Google chart using data from AngularJS. It's functioning properly, but now I want to make the chart dynamic based on my Angular Scope value. I have a filter ...

javascriptangularjscharts

What is the best approach for making a drawer resizable?

I am interested in making the material ui drawer resizable width using a draggable handle. Currently, I have implemented a solution that involves adding a mouse event listener to the entire application and updating the width based on the position of the ...

javascriptreactjsresizematerial-ui

Getting URL parameters dynamically without reloading the page

Here's a particular issue I'm encountering: I've implemented the following function to fetch the GET Parameters from a URL. $(document).ready(function() { function getParam(variable) { var query = window.location.search.sub ...

javascriptjqueryhtmlurl

I am utilizing Vuex to store all of the product details and handle API request queries efficiently

Question regarding Vue/Vuex efficiency and best practices. I am working with an API that returns a paginated data-set of 50 products, which I am storing in a Vuex store. When displaying all products, I iterate over the Vuex store. Now, for individual pr ...

javascriptrestvue.jsvuejs2vuex

Regular expression that can be used to extract information from a text file by filtering and returning only

When I open a text file, it contains several lines like the examples below. surname australia enter name j.jonhs enter name j.cause enter name f.london enter I am seeking assistance to modify the code snippet below so that it captures the first line m ...

javascripthtml

``When multiple elements are clicked, the second click will remove the class

I'm struggling with jQuery. Essentially, I want the first click on "div 1" to add a class to the others and display "lorem ipsum" text, and continue this pattern for the rest. However, if I click on the same div again, the class should be removed and ...

javascriptjquery

Samsung S4 Android device experiencing interruption in HTML5 video playback

When using Android Webview to play html5 videos, including Youtube videos (using my own tags and Youtube embedded iFrames), I came across an issue with the Samsung Galaxy S4. The problem occurs in the following scenario: Play a video. Press 'back&ap ...

javascriptandroidhtmlandroid-webviewhtml5-video

Exploring Angular 2 Routing across multiple components

I am facing a situation where I have an app component with defined routes and a <router-outlet></router-outlet> set. Additionally, I also have a menu component where I want to set the [routerLink] using the same routes as the app component. How ...

javascriptangular

Updating form fields within nested forms using the FormBuilder array

The recommended method to change nested values according to the API documentation is using patchValue. For example, myForm.patchValue({'key': {'subKey': 'newValue'}}); But what if we need to change values in a nested array, ...

javascriptangularangular2-forms

What is the default method for automatically disabling drop down fields?

I've created a script that will gray out a drop-down field if a prior selection wasn't made. Once the appropriate choice is selected, the grayed-out field will become active. My query is, how can I set the drop-down field to be initially grayed ...

javascriptjqueryhtmldrop-down-menu

Determine the class name of an element when it is clicked on

For various reasons, I am unable to use $('.class').click or on('click', function..) Therefore, I must utilize the onclick="" event from the html element. Is there a way to determine the class of the element where the onclick event oc ...

javascriptjqueryonclick

What is the reason behind every single request being treated as an ajax request?

Recently, I embarked on a new application development journey using rails 4.0. However, I've encountered an unexpected situation where every request is being processed as an ajax request. For instance, consider this link: =link_to "View detail", pr ...

javascriptruby-on-railsajax

Is there a way to retrieve the properties of another function within the same component?

I am trying to place NumberFormat inside OutlinedInput and I also need different properties for the format of NumberFormat. (There will be a select window that defines which format property to use). This is what I have: import OutlinedInput from "@ma ...

javascriptreactjsmaterial-ui

Create a collection showcasing only the values present in an array based on a specified percentage

An array named "data" consists of the given information. [['amazon', 'phone', 'serious', 'mind', 'blown', 'serious', 'enjoy', 'use', 'applic', &apos ...

pythonarrays

Transmitting form information to a nested page within a div container

This is my fourth attempt to seek an answer to this question, as I've faced downvotes in previous attempts. So here we go again. I am trying to send data from a hidden input within a form using ajax. The value of the hidden input is generated by a php ...

javascriptphpajaxforms

Issues have been identified with the functionality of the Am charts v3 XY in conjunction with a

I'm currently working on a project with angularJS and utilizing the npm package amcharts3 "^3.21.15". I've encountered a minor issue regarding the logarithmic scale in my XY chart. Below is my chart without the logarithmic scale: View working ch ...

javascriptchartsamchartslogarithm

Display tables side by side using Material-UI

Presently, I am utilizing NextJs and MaterialUI to display a table with data fetched from an API created in Strapi. Challenge The current issue lies in using a table component with props that are imported into a page, where the props are mapped to an API ...

javascriptreactjsnext.jsapollostrapi