vue.js - 在vue js md-table中隐藏列标题

Question

当窗口变小时，我试图隐藏 vue 材料中的表格列。

像这样：

<md-table-cell class="md-layout-item md-medium-hide" md-label="Job Title" md-sort-by="title">{{ item.title }}</md-table-cell>

但正如您在此代码沙箱中看到的那样

https://codesandbox.io/s/zz6v9j7vm4

即使行消失，“职位”列仍然存在。

我怎样才能让行标题消失？

Answer 1

也许这不是最好的解决方案，但它对我有用。

<template>
  <div>
    <md-table v-model="users" md-sort="name" md-sort-order="asc" md-card>
      <md-table-toolbar> <h1 class="md-title">Users</h1> </md-table-toolbar>

      <md-table-row slot="md-table-row" slot-scope="{ item }">
        <md-table-cell md-label="ID" md-numeric>{{ item.id }}</md-table-cell>
        <md-table-cell md-label="Name" md-sort-by="name">{{
          item.name
        }}</md-table-cell>
        <md-table-cell md-label="Email" md-sort-by="email">{{
          item.email
        }}</md-table-cell>
        <md-table-cell md-label="Gender" md-sort-by="gender">{{
          item.gender
        }}</md-table-cell>
        <md-table-cell
          class="md-layout-item"
          v-if="isVisible"
          md-label="Job Title"
          md-sort-by="title"
          >{{ item.title }}</md-table-cell
        >
      </md-table-row>
    </md-table>
  </div>
</template>

<script>
export default {
  name: "TableSort",
  data: () => ({
    users: [
      {
        id: 1,
        name: "Shawna Dubbin",
        email: "sdubbin0@geocities.com",
        gender: "Male",
        title: "Assistant Media Planner"
      },
      {
        id: 2,
        name: "Odette Demageard",
        email: "odemageard1@spotify.com",
        gender: "Female",
        title: "Account Coordinator"
      },
      {
        id: 3,
        name: "Lonnie Izkovitz",
        email: "lizkovitz3@youtu.be",
        gender: "Female",
        title: "Operator"
      },
      {
        id: 4,
        name: "Thatcher Stave",
        email: "tstave4@reference.com",
        gender: "Male",
        title: "Software Test Engineer III"
      },
      {
        id: 5,
        name: "Clarinda Marieton",
        email: "cmarietonh@theatlantic.com",
        gender: "Female",
        title: "Paralegal"
      }
    ],
    windowWidth: null,
    isVisible: true
  }),
  methods: {
    handleWindowResize(event) {
      this.windowWidth = event.currentTarget.innerWidth;
      this.isVisible = this.windowWidth <= 720 ? false : true;
    }
  },
  beforeDestroy: function() {
    window.removeEventListener("resize", this.handleWindowResize);
  },
  mounted() {
    window.addEventListener("resize", this.handleWindowResize);
  }
};
</script>