How to pass photo url in el-table-column

[robertnicjoo]

Please follow the issue template, or your issue may be closed automatically.

For bug report, provide the following section

Online reproduce

It is important to provide an online sample to reproduce the issue.

• Template for reproducing front-end pagination issue
• Template for reproducing server-end pagination issue

Expected Behavior

Showing image in el-table-column

Current Behavior

Not sure how to show it when el-table-column is prop based

Steps to Reproduce

here is my code:

<data-tables class="bg-white shadow-sm" :data="products" :total="total" :load-data="getProducts" style="width: 100%" :action-col="actionCol" :table-props="tableProps" :pagination-props="{ layout: &quot;sizes, prev, pager, next, jumper, ->, total, slot&quot; }">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" width="70" label="ID" sortable="custom"></el-table-column>
            <el-table-column prop="photo" label="Cover" sortable="custom"></el-table-column>
            <el-table-column prop="name" label="Name" sortable="custom"></el-table-column>
            <el-table-column prop="price" label="Price" sortable="custom"></el-table-column>
            <el-table-column prop="new_price" label="New Price" sortable="custom"></el-table-column>
            <el-table-column prop="active" label="Active" :width="70" sortable="custom"></el-table-column>
            <el-table-column prop="sku" label="SKU" sortable="custom"></el-table-column>
            <el-table-column prop="qty" label="Quantity" sortable="custom"></el-table-column>
            <el-table-column prop="updated_at" label="Last Update" sortable="custom"></el-table-column>
</data-tables>

Detailed Description

I need to show my cover column (cover image of products) as images, but i cannot get full path in prop part.

For feature request, provide the following section

Motivation / Use Case

First of all: I'm not sure what this part is, just in case i share my second need in this table here but my priority is to show images (as i explained above)

Showing numbers with thousands commas columns of price and new_price

Expected Behavior

Currently it shows numbers as plain as they are i can't get filter in prop values

Other Information

Nothing.

[njleonzhang]

please follow sample to make a reproduce. I can not get your point. http://jsfiddle.net/zpczjl/9tp3z4bn/

But if you want to custom a column, you can follow https://www.njleonzhang.com/vue-data-tables/#/en-us/actionCol?id=customize-the-action-column

 <el-table-column label="Actions" min-width="100px">
      <template slot-scope="scope">
        <el-button v-for="button in customButtonsForRow(scope.row)" :key="button.name" type="text" @click="button.handler">
          {{ button.name }}
        </el-button>
        <el-checkbox :value="true">delete
      </el-checkbox></template>
    </el-table-column>

with slot-scope you can make any customization for any column.

[robertnicjoo]

@njleonzhang here is what i want

I just want to show my products image in cover column. Currently i only get url and unable to use <img tag.

[robertnicjoo]

@njleonzhang here is result based on your suggestion slot-scope

[njleonzhang]

I think you should use :src="photo", anyway it's not an issue about vue-data-talbes.

[robertnicjoo]

Well this was closed by no valid answer provided, so i add final code and try to actually help whoever comes here in future.

Final code

<el-table-column  align="center" label="Cover">
    <template slot-scope="scope" class="image-slot">
        <el-image style="width: 90px; height: 90px" :src="scope.row.photo" lazy>
        </el-image>
    </template>
</el-table-column>

Explanation

The error that i got in my screenshot above about scope was because it requires to provide information of that scope slot so i had to add scope.row.photo in my :src and :src without scope.row won't work at all.

Note: as we do not have loop v-for in element ui let say:

v-for="product in products"

so it gives us row instead of product. Which is like:

row.photo

hope it can help others.

now you can close it