[Vuejs]-Vue Js Element UI how to render array object in table column

by

0👍

✅

You are selecting first item in downloadfiles array here tableData[0].downloadfiles[0] and you shouldn’t.

It works like this:

  <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>

Full example here

If you don’t need to use subcolumns then solution would be to use scoped slot in table column.

For example:

  <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>

Full example here

Leave a comment