vue js로 테이블 열 숨기기

vue js로 테이블 열 숨기기

안녕하세요. 데이터 테이블의 열을 숨기거나 표시해야 합니다. 이 작업을 수행하는 좋은 방법을 모르겠습니다. 열 확인란을 선택하면 열이 표시되고 선택하지 않으면 열이 숨겨집니다.vuetify https://codepen.io/anon/pen/rmXwYG?editors=1010 를 사용하고 있습니다.

이 스크립트는 다음과 같습니다.

new Vue({
    el: '#app',
    data() {
      return {
        search: '',
        totalItems: 0,
        items: [],
        loading: true,
        pagination: {},
        columns: [],
        headers: [{
                text: 'Dessert (100g serving)',
                left: true,
                sortable: false,
                value: 'name'
            },
            {
                text: 'Calories',
                value: 'calories'
            },
            {
                text: 'Fat (g)',
                value: 'fat'
            },
            {
                text: 'Carbs (g)',
                value: 'carbs'
            },
            {
                text: 'Protein (g)',
                value: 'protein'
            },
            {
                text: 'Sodium (mg)',
                value: 'sodium'
            },
            {
                text: 'Calcium (%)',
                value: 'calcium'
            },
            {
                text: 'Iron (%)',
                value: 'iron'
            }
        ]
    }
    },
    watch: {
        pagination: {
            handler() {
                this.getDataFromApi()
                    .then(data => {
                        this.items = data.items
                        this.totalItems = data.total
                    })
            },
            deep: true
        }
    },
    mounted() {
        this.getDataFromApi()
            .then(data => {
                this.items = data.items
                this.totalItems = data.total
            })
    },
    methods: {
        getDataFromApi() {
            this.loading = true
            return new Promise((resolve, reject) => {
                const {
                    sortBy,
                    descending,
                    page,
                    rowsPerPage
                } = this.pagination

                let items = this.getUsers()
                const total = items.length

                if (this.pagination.sortBy) {
                    items = items.sort((a, b) => {
                        const sortA = a[sortBy]
                        const sortB = b[sortBy]

                        if (descending) {
                            if (sortA < sortB) return 1
                            if (sortA > sortB) return -1
                            return 0
                        } else {
                            if (sortA < sortB) return -1
                            if (sortA > sortB) return 1
                            return 0
                        }
                    })
                }

                if (rowsPerPage > 0) {
                    items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
                }

                setTimeout(() => {
                    this.loading = false
                    resolve({
                        items,
                        total
                    })
                }, 1000)
            })
        },
        getUsers() {
            return [{
                    value: false,
                    name: 'Frozen Yogurt',
                    calories: 159,
                    fat: 6.0,
                    carbs: 24,
                    protein: 4.0,
                    sodium: 87,
                    calcium: '14%',
                    iron: '1%'
                },
                {
                    value: false,
                    name: 'Ice cream sandwich',
                    calories: 237,
                    fat: 9.0,
                    carbs: 37,
                    protein: 4.3,
                    sodium: 129,
                    calcium: '8%',
                    iron: '1%'
                },
                {
                    value: false,
                    name: 'Eclair',
                    calories: 262,
                    fat: 16.0,
                    carbs: 23,
                    protein: 6.0,
                    sodium: 337,
                    calcium: '6%',
                    iron: '7%'
                },
                {
                    value: false,
                    name: 'Cupcake',
                    calories: 305,
                    fat: 3.7,
                    carbs: 67,
                    protein: 4.3,
                    sodium: 413,
                    calcium: '3%',
                    iron: '8%'
                },
                {
                    value: false,
                    name: 'Gingerbread',
                    calories: 356,
                    fat: 16.0,
                    carbs: 49,
                    protein: 3.9,
                    sodium: 327,
                    calcium: '7%',
                    iron: '16%'
                },
                {
                    value: false,
                    name: 'Jelly bean',
                    calories: 375,
                    fat: 0.0,
                    carbs: 94,
                    protein: 0.0,
                    sodium: 50,
                    calcium: '0%',
                    iron: '0%'
                },
                {
                    value: false,
                    name: 'Lollipop',
                    calories: 392,
                    fat: 0.2,
                    carbs: 98,
                    protein: 0,
                    sodium: 38,
                    calcium: '0%',
                    iron: '2%'
                },
                {
                    value: false,
                    name: 'Honeycomb',
                    calories: 408,
                    fat: 3.2,
                    carbs: 87,
                    protein: 6.5,
                    sodium: 562,
                    calcium: '0%',
                    iron: '45%'
                },
                {
                    value: false,
                    name: 'Donut',
                    calories: 452,
                    fat: 25.0,
                    carbs: 51,
                    protein: 4.9,
                    sodium: 326,
                    calcium: '2%',
                    iron: '22%'
                },
                {
                    value: false,
                    name: 'KitKat',
                    calories: 518,
                    fat: 26.0,
                    carbs: 65,
                    protein: 7,
                    sodium: 54,
                    calcium: '12%',
                    iron: '6%'
                }
            ]
        }
    }
})

간단한 답변은 계산 속성을 사용하여 포함할 열을 결정하는 것입니다.

데이터 테이블에서 헤더 목록과 항목(행) 목록을 가져오고 있습니다.데이터 테이블 결과에 포함되어야 하는 열 목록을 반환하기 위해 몇 가지 계산된 속성을 Vue에 추가했습니다.

computed:{
  filteredHeaders(){
    return this.headers.filter(h => h.selected)
  },
  filteredItems(){
    return this.items.map(item => {
      let filtered = Object.assign({}, item)
      this.headers.forEach(header => {
        if (!header.selected) delete filtered[header.value]
      })
      return filtered
    })
  }
},

이러한 계산치는, 라고 하는 헤더의 속성을 사용하고 있는 것에 주의해 주세요.selected출력에 포함할 헤더를 선택할 수 있도록 헤더 목록에 이 속성을 추가했습니다.

{
  text: 'Fat (g)',
  value: 'fat',
  selected: true
},

그런 다음 해당 속성을 모델로 사용해야 합니다.

<v-checkbox v-bind:label="header.text" v-model="header.selected" :value="header.selected" ></v-checkbox>

마지막으로 각 행에 대한 템플릿이 있습니다.각 열이 활성화 되어 있는지 확인하기 위해 수정했습니다.

<template slot="items" scope="props">
  <td v-if="showColumn('name')">{{ props.item.name }}</td>
  <td v-if="showColumn('calories')"  class="text-xs-right">{{ props.item.calories }}</td>
  <td v-if="showColumn('fat')"  class="text-xs-right">{{ props.item.fat }}</td>
  <td v-if="showColumn('carbs')"  class="text-xs-right">{{ props.item.carbs }}</td>
  <td v-if="showColumn('protein')"  class="text-xs-right">{{ props.item.protein }}</td>
  <td v-if="showColumn('sodium')"  class="text-xs-right">{{ props.item.sodium }}</td>
  <td v-if="showColumn('calcium')"  class="text-xs-right">{{ props.item.calcium }}</td>
  <td v-if="showColumn('iron')"  class="text-xs-right">{{ props.item.iron }}</td>
</template>

그리고 여기 그showColumn이 템플릿에서 사용되는 메서드입니다.

showColumn(col){
  return this.headers.find(h => h.value === col).selected
},

마지막으로, 여기 작업 예가 있습니다.

확실히 이것은 튜닝이 되어 있지 않습니다.그냥 초기 버전일 뿐입니다.하지만 그게 널 움직이게 할 거야.

설정만 하면 됩니다.fields표시할 열만 정의합니다.

모든 필드도 루프합니다.

예:<b-table striped hover :items="items" :fields="fields"></b-table>

즐거운 시간 되세요.

언급URL : https://stackoverflow.com/questions/44309464/hide-table-column-with-vue-js