Vue3中用Element Plus展示图片表格

2023-12-04 01:00:46

在 Vue 3 中使用 Element Plus el-table 组件展示图片表格

简介

随着 Vue 3 的不断成熟，它的强大特性和灵活性吸引了越来越多的开发者。Element Plus 作为 Vue 3 的最佳拍档，提供大量优质组件，让开发者能够轻松构建美观且功能强大的用户界面。在使用 Element Plus 的 el-table 组件展示图片表格时，本文将深入探讨如何获取当前展示行的数据并将其与 img 标签结合起来展示图片。

获取当前展示行的数据

获取当前展示行的数据是展示图片表格的关键。Element Plus 提供了 scope，它表示作用域，scope.row 即为当前展示行的数据。

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="imgUrl" label="图片">
    <template slot-scope="scope">
      <p>当前行的姓名：{{ scope.row.name }}</p>
      <p>当前行的年龄：{{ scope.row.age }}</p>
    </template>
  </el-table-column>
</el-table>

将图片地址与 img 标签结合起来展示图片

获取到当前展示行的数据后，我们需要将图片地址与 img 标签结合起来展示图片。我们可以使用 slot-scope 属性来实现，它可以将当前展示行的数据传递给模板。

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="imgUrl" label="图片">
    <template slot-scope="scope">
      <img :src="scope.row.imgUrl" alt="">
    </template>
  </el-table-column>
</el-table>

实际案例

以下是一个实际案例，展示了如何在 Vue 3 中使用 Element Plus el-table 组件展示图片表格：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="imgUrl" label="图片">
      <template slot-scope="scope">
        <img :src="scope.row.imgUrl" alt="" style="width: 100px; height: 100px;">
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const tableData = ref([
      {
        name: '张三',
        age: 20,
        imgUrl: 'https://picsum.photos/id/237/200/300',
      },
      {
        name: '李四',
        age: 25,
        imgUrl: 'https://picsum.photos/id/238/200/300',
      },
    ]);

    return {
      tableData,
    };
  },
};
</script>

常见问题解答

如何设置图片的宽度和高度？
- 可以通过 CSS 样式来设置图片的宽度和高度，例如 <img :src="scope.row.imgUrl" alt="" style="width: 100px; height: 100px;">。
如何限制图片的大小？
- 可以在 el-table-column 中使用 width 属性来限制图片的宽度，例如 <el-table-column prop="imgUrl" label="图片" width="100">。
如何将图片作为链接打开？
- 可以使用 <a> 标签将图片作为链接打开，例如 <a href="scope.row.imgUrl"><img :src="scope.row.imgUrl" alt=""></a>。
如何懒加载图片？
- 可以使用第三方库来懒加载图片，例如 VueLazyload，从而提高页面加载速度。
如何使用不同的图片占位符？
- 可以通过在 img 标签中使用 v-lazy 指令来指定不同的图片占位符，例如 <img v-lazy="scope.row.imgUrl" :error="'/images/error.png'" :loading="'/images/loading.gif'"></img>。