Вопрос по отображению конкретного столбца таблицы по чекбоксу VUE.JS

Question

Необходимо, чтобы по клику конкретного чекбокса работал условный рендеринг конкретного столбца (скрыть/отобразить). Пока работает только скрытие заголовков. Возможно на каждую строку повесить дерективу v-if с жестко задаными параметрами, НООО если будет огромное количество заголовков? Не могу понять как автоматизировать это...БУДУ ОЧЕНЬ БЛАГОДАРЕН ЗА ПОМОЩЬ.

export default {
  name: 'Page',
  data() {
    return {
      selectedHeaders: [],
      headers: [
        {id: 1, headline: 'Имя'},
        {id: 2, headline: 'Фамилия'},
        {id: 3, headline: 'Год рождения'},
      ],
      users: [
        {id: 1, firstName: 'Artem', lastName: 'Strekalov', dob: '1994'},
        {id: 2, firstName: 'Ivan', lastName: 'Ivanov', dob: '1997'},
        {id: 3, firstName: 'Victor', lastName: 'Kozybenko', dob: '1993'},
        {id: 4, firstName: 'Alex', lastName: 'Shapovalov', dob: '1990'},
      ],
    }
  },
  methods: {
    test(head) {
      this.selectedHeaders.forEach((item) => {
        if (item.headline == head) {
          return true
        } else {
          return false
        }
      })
    },
  },
  computed: {
    newUsers() {
      return this.users
    },
    getHeaders() {
      return this.headers
    },
  },
}

<template>
  <div class="content">
    <div class="content__header">
      <span v-for="header in getHeaders" :key="header.id">
        <input type="checkbox" :value="header" v-model="selectedHeaders" />
        <label>{{ header.headline }}</label>
      </span>
    </div>
    <div class="content__main">
      <table class="content__main-table">
        <thead>
          <tr>
            <th v-for="header in selectedHeaders" :key="header.id">
              {{ header.headline }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in newUsers" :key="user.id">
            <td>{{ user.firstName }}</td>
            <td>{{ user.lastName }}</td>
            <td>{{ user.dob }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

Answer 1

new Vue({
  el: "#app",
  data() {
    return {
      columns: [{
          label: "FirstName",
          code: 'firstName',
          visible: true
        },
        {
          label: "LastName",
          code: 'lastName',
          visible: true
        },
        {
          label: "DOB",
          code: 'dob',
          visible: true
        }
      ],
      users: [{
          id: 1,
          firstName: 'Artem',
          lastName: 'Strekalov',
          dob: '1994'
        },
        {
          id: 2,
          firstName: 'Ivan',
          lastName: 'Ivanov',
          dob: '1997'
        },
        {
          id: 3,
          firstName: 'Victor',
          lastName: 'Kozybenko',
          dob: '1993'
        },
      ],
    }
  },
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="app">
  <table>
    <thead>
      <tr>
        <template v-for="col in columns">
                        <th  v-if="col.visible"><input type="checkbox" v-model="col.visible">{{col.label}}</th>
                    </template>
      </tr>
    </thead>
    <tbody>
      <tr v-for="user in users">
        <template v-for="col in columns">
                        <td v-if="col.visible">{{user[col.code]}}</td>
                    </template>
      </tr>
    </tbody>
  </table>
</div>

По коду, вроде все понятно, что происходит

БЛОГ НА HUSL

Вопрос по отображению конкретного столбца таблицы по чекбоксу VUE.JS

Ответы (1 шт):