关于elment-ui表单el-table显示图片的问题

  • Z时代
  • 2024-02-08
  • 分类：IT

我想在el-table表单商品列里显示图片，我用了一个对象的photo属性来存图片，并把对象放进数组里，但是结果只能显示img框，图片看不见，请教一下大哥们如何解决？万分感谢！
关于elment-ui表单el-table显示图片的问题
以下是代码

<el-main>
  <el-table :data="tableData">
    <el-table-column label="商品" index="">
      <template slot-scope="scope">
        //在行中要显示的图片
        <img :src="scope.photo" />
      </template>
    </el-table-column>
    <el-table-column prop="name" label="名称">
    </el-table-column>
    <el-table-column prop="detail" label="详细"> </el-table-column>
  </el-table>
</el-main>

...

import Logo from "../assets/logo.jpg";
export default {
  data() {
    const item = {
      photo: Logo,
      name: "某商品",
      detail: "商品详细商品详细商品详细商品详细商品详细商品详细",
    };
    return {
      tableData: Array(20).fill(item),
    };
  },
};

回答：

scope.row.photo

回答：

    //在行中要显示的图片
    // 你可以显示下scope的值  scope.row相当于当前行的数据对象。这里就是用插槽 拿到 // 当前行 row是个内置的属性

<template slot-scope="scope">

    {{scope.row}} 
    <img :src="scope.photo" />

</template>

以上是 关于elment-ui表单el-table显示图片的问题 的全部内容， 来源链接： utcz.com/p/936691.html

回到顶部