Vuetify 表格如何显示图片

山岫

已于 2022-04-09 17:47:05 修改

阅读量433

点赞数

分类专栏：前端 Vue Vuetify 文章标签： html vue

于 2022-04-09 17:45:24 首次发布

本文链接：https://blog.csdn.net/shanxiu_/article/details/124064707

版权

前端同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

Vuetify

2 篇文章 0 订阅

订阅专栏

使用动态插槽 item.<name> 来自定义某些列。 <name> 是传给 headers 的某一表头数据项的 value 属性的值。所以要自定义 img 列，我们要使用 item.img 插槽。

<template v-slot:item.img="{ item }">
   <v-img :src="item.img" width="40px"></v-img>
</template>

附上全部代码：

<template>
  <v-container>
    <v-data-table
      :headers="headers"
      :items="movieInfoList"
      :items-per-page="5"
      item-key="name"
      class="elevation-1"
    >
    <!-- 显示图片 -->
      <template v-slot:item.img="{ item }">
        <v-img :src="item.img" width="40px"></v-img>
      </template>
    </v-data-table>
  </v-container>
</template>


<script>
import { movieOnInfoListApi } from "@/api/api.js";

export default {
  name: "News",
  data() {
    return {
      headers: [
        { text: "日期", align: "start", sortable: false,value: "rt" },
        { text: "封面图", value: "img" },
        { text: "电影", value: "nm" },
        { text: "评分", value: "sc" },
        { text: "主演", value: "star" },
        { text: "上映时间", value: "comingTitle" },
      ],
      movieInfoList: [],
    };
  },
  //初始化
  mounted: function () {
    this.movieInfo();
  },
  methods: {
    movieInfo() {
      // 调用API接口获取数据
      movieOnInfoListApi({}).then((res) => {
        if (res.status == 200) {
          this.movieInfoList = res.data.movieList;
          console.log(this.movieInfoList);
        }
      });
    },
  },
};
</script>

参考文档：Data table 数据表格 — Vuetify数据表格组件用于显示表格数据，方便用户浏览。功能包括排序，搜索，分页和选择。https://vuetifyjs.com/zh-Hans/components/data-tables/#section-987976ee