Скрыть заголовок столбца в vue js md-таблице - PullRequest
Новая
       17

Скрыть заголовок столбца в vue js md-таблице

0 голосов
/ 27 ноября 2018

Я пытаюсь скрыть столбцы таблицы в материале 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

Столбец "название должности" остается, даже если строки пропали.

Как можно также сделать так, чтобы заголовки строк исчезали?

1 Ответ

0 голосов
/ 27 ноября 2018

Возможно, это не лучшее решение, но оно работает для меня. 

<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>
...