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

Is it possible to simultaneously play several one-shot sound effects on mobile web browsers?

I'm attempting to trigger a sound effect when the user clicks a button on my web application. Initially, I experimented with this approach: var sound = new Audio("soundeffect.ogg"); function clickHandler(){ sound.play(); } Unfortunately, if the ...

javascripthtmlhtml5-audio

Vue, socket.io and Express Session all reset with each new page load

I am currently working on developing a basic application with a login feature to experiment with socketio, vue, and nodejs (express). I have successfully implemented sending and receiving functionality on both the client and server sides. However, I am fac ...

node.jsvue.jsexpresssocket.ioexpress-session

How can I deactivate the main color of the FormLabel when the focus is on the radio button group?

Is there a way to change the color of FormLabel to black instead of the primary color when the radio button group is focused? const styles = { formLabel: { color: "#000" }, formLabelFocused: { color: "#000" } }; function App({ classes } ...

javascriptreactjsmaterial-uijss

Ways to make a jQuery function more concise

I need help with optimizing this jQuery function. It's repetitive and I want to find a way to shorten it while achieving the same result. Can someone assist me in streamlining this code? $(".c1").delay(5000).fadeOut("slow", function() { $("#phone ...

javascriptjqueryjquery-callback

Adjustable height for text input field

Is it possible to adjust the height of a textarea dynamically based on user input, rather than relying on scrollbars when content exceeds the width and height of the field? <textarea class="form-control"></textarea> For instance, if a user ty ...

javascripthtmlcsstwitter-bootstrap

Triggering a JavaScript function upon the alteration of a Dojo auto-complete widget's value

I'm encountering an issue with calling a javascript function when the value of a Dojo auto completer changes. Despite trying to call the function through the "onChange" attribute, it doesn't work as expected. Within the javascript function, my ...

javascriptautocompletedojostruts2

.class selector malfunctioning

I'm currently developing a card game system where players can select a card by clicking on it and then choose where to place it. However, I've encountered an issue where nothing happens when the player clicks on the target place. Here is the li ...

javascriptjquery

The React Component is not displaying any content on the webpage

I developed a Reactjs application using the create-react-app. However, I am facing an issue where the components are not displaying on the page. I suspect that App.js is failing to render the components properly. Take a look at my code: App.js import R ...

javascriptreactjscreate-react-app

Update the background image every minute with a smooth transition effect

I am currently in the process of developing a personal dashboard that requires dynamic background images to change every minute. To achieve this functionality, I have integrated the [Pixabay API][1] and formulated the following API request: https://pixaba ...

javascripthtmljquerycssbackground-image

Utilizing a single component for various purposes with diverse tags in react

I am faced with the challenge of creating two almost identical components, Component A: const ClaimedLabel = ():React.Element => ( <div tw=""> <p tw="">Some Text here</p> <div tw=""> <Icon ...

javascriptreactjstypescriptcomponentscode-reuse

Tips for incorporating a spinner during content loading within AngularJS

When the user clicks on the "Search" button, content will load and the button label will change to "Searching" with a spinner shown while the content is loading. Once the content has loaded (Promise resolved), the button label will revert back to "Search" ...

javascriptangularjstwitter-bootstrap

Struggling to comprehend JavaScript in order to customize a Google map

I'm new to the JavaScript world and having some trouble with my map styling. The map itself is displaying correctly, but the styles aren't being applied. I keep getting an error message saying I have too much code and not enough context, so I&ap ...

javascriptjsongoogle-mapscustomization

How do I activate the <li> tag using jQuery?

I am currently implementing pagination on my webpage using the following JavaScript code: var pagingList = $('<ul>', {class: 'pagination list-unstyled list-inline'}); ...

javascriptjquery

Issues with Laravel and Vue component failing to render

Something strange happened - the Vue components were initially working fine and loading without any issues. However, out of nowhere, I started encountering this error message: [Vue warn]: Unknown custom element: - did you register the component correctly? ...

laravelvue.js

Getting Anchor Javascript to Submit in Internet Explorer. Functioning in Firefox, Chrome, and Safari

Greetings Stackoverflow enthusiasts, I have been working on a raffle form where users can input their name and select their location from a dropdown list. After filling out the form, they can click submit and their information will be stored in a database ...

javascriptjqueryinternet-explorer-8

Guide on inserting the elements <label>, <input>, and <span> into a <li> in a particular sequence

var btn = document.querySelector('.add'); var remove = document.querySelector('.draggable'); function dragStart(e) { this.style.opacity = '0.4'; dragSrcEl = this; ...

javascripthtml

Steps for adding a favicon to Content-Type: application/json

In my implementation using node.js, I have an API that returns a response with Content-Type: application/json. Here is an example: module.exports={ api: (req, res) => { let data = {"data": [1, 2, 3]}; res.status(200).json(d ...

javascriptnode.jsexpresscontent-typefavicon

Changing a list of items with unique identifier keys

I've got add I've got delete now I need to make modifications The add function simply adds to the collection without any organization The delete function is precise, using a key to locate and remove the desired item: addInput = (name) => ...

javascriptarraysreactjsreact-native

Insert a scrollbar into the new popup window on Internet Explorer after the window has been opened

I am looking to enable scrolling in a pop-up window after it has been opened. While FireFox offers the 'window.scrollbars' property for this, Internet Explorer does not have a similar feature. Is there a way to add scrolling functionality in IE u ...

javascriptinternet-explorerpopup

Having difficulty assigning an argument to an HTTP get request in AngularJS

I am new to working with AngularJS and I am attempting to pass an integer argument to an HTTP GET request in my controller. Here is a snippet of my code: (function() { angular .module('myApp.directory', []) .factory('Ne ...

javascriptangularjs