element-plus表格中展示图片

        <el-table :data="tableData.dataList" class="tableInfo">
          <el-table-column label="物品名称" prop="name" align="center" />
          <el-table-column prop="img" label="商品图片" align="center" width="100">
            <template v-slot:default="scope">
              <el-image :src="scope.row.img" />
            </template>
          </el-table-column>
          <el-table-column label="价格" prop="price" align="center" />
          <el-table-column label="交易状态" prop="state" align="center" />
          <el-table-column label="下单时间" prop="time" align="center" />
          <el-table-column label="卖家姓名" prop="saleName" align="center" />
          <el-table-column label="卖家联系方式" prop="salePhone" align="center" />
        </el-table>

其中scope为table绑定数据的每一项，scope.row为数据的每一行，然后输入对应的图片的路径，就可完成图片的展示。

其上使用vue3的写法。

数据格式为：

[
    {id: 5,  name: '手机', imgUrl: '1682735180939_phone.jpg', price: 2999, …}
    {id: 4,  name: 'u盘', imgUrl: '1681473928591_upan.png', price: 99, …}
    {id: 3,  name: '口红', imgUrl: '1678239690144_girl.jpg', price: 169, …}
]