Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(MdTable): remove table head while column removed #1354

Merged
merged 1 commit into from Dec 29, 2017
Merged

fix(MdTable): remove table head while column removed #1354

merged 1 commit into from Dec 29, 2017

Conversation

VdustR
Copy link
Member

@VdustR VdustR commented Dec 28, 2017

compute MdTable.items again on column remove.

fix #1347

@VdustR
Copy link
Member Author

VdustR commented Dec 28, 2017

My test case:

<template>
  <div>
    <div>
      <md-checkbox v-model="idShown">ID</md-checkbox>
      <md-checkbox v-model="nameShown">Name</md-checkbox>
      <md-checkbox v-model="emailShown">Email</md-checkbox>
      <md-checkbox v-model="genderShown">Gender</md-checkbox>
      <md-checkbox v-model="jobShown">Job Title</md-checkbox>
    </div>
    <div>
      <md-checkbox v-model="show[0]">1</md-checkbox>
      <md-checkbox v-model="show[1]">2</md-checkbox>
      <md-checkbox v-model="show[2]">3</md-checkbox>
      <md-checkbox v-model="show[3]">4</md-checkbox>
      <md-checkbox v-model="show[4]">5</md-checkbox>
    </div>
    <md-table v-model="usersToShow" 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 v-if="idShown" md-label="ID" md-sort-by="id" md-numeric>{{ item.id }}</md-table-cell>
        <md-table-cell v-if="nameShown" md-label="Name" md-sort-by="name">{{ item.name }}</md-table-cell>
        <md-table-cell v-if="emailShown" md-label="Email" md-sort-by="email">{{ item.email }}</md-table-cell>
        <md-table-cell v-if="genderShown" md-label="Gender" md-sort-by="gender">{{ item.gender }}</md-table-cell>
        <md-table-cell v-if="jobShown" md-label="Job Title" md-sort-by="title">{{ item.title }}</md-table-cell>
      </md-table-row>
    </md-table>
  </div>
</template>

<script>
  export default {
    name: 'TableTemplate',
    data: () => ({
      idShown: false,
      nameShown: false,
      emailShown: false,
      genderShown: false,
      jobShown: false,
      show: [false, false, false, false, false],
      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'
        }
      ]
    }),
    computed: {
      usersToShow () {
        return this.users.filter((user, index) => this.show[index])
      }
    }
  }
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Table header does not hide when column disapears
2 participants