Как переключить добавить удалить несколько элементов в массиве в одной позиции?

Question

Я использую vuetify datatable. В этой таблице я добавляю, какой заголовок таблицы и данные должны отображаться. Я написал некоторый код, связанный с удалением или добавлением элементов в массив. Но это не правильный код. Если я удаляю несколько заголовков, они удаляются. Но если я добавлю их снова, их порядок изменится. Может кто-нибудь, пожалуйста, помогите мне.

Пожалуйста, перейдите по ссылке ниже для кода в codepen

A full code can be found in

https://codepen.io/kiranvilla/pen/JVRvwg?editors=1010

Answer 1

Это можно сделать, изменив только данные заголовков, когда вы примените фильтр, и ваша таблица может выглядеть следующим образом. Вы можете добавлять заголовки и привязку данных динамически,

<v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-10"
    >
      <template v-slot:items="props">
        <td v-for="(head, index) in headers" :key="index">
          {{ props.item[head['value']] }}
        </td>
      </template>
    </v-data-table>

https://codepen.io/anon/pen/dLpaOp?editors=1010