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

Question

TemkaAkish @TemkaAkish

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

Я новичок в Vuejs, у меня есть проект, который использует VueJS 2 и BootstrapVue. Я создал компонент DataTable.vue и хочу использовать где нужно, но там должны быть динамические столбцы с действиями (по дизайну в некоторых таблицах первый столбец с флажками, кнопками "+", в некоторых таблицах есть действия, как редактирование, дублирование, удаление) и данные (данные могут отличаться в зависимости от страницы (курсы, лабораторки, лекции). У меня возник вопрос, как можно это оптимизировать?

Пока что я использую условие if-else, чтобы показать столбец, который мне нужен, но там также будет другая кнопка (не кнопка добавления, например, флажок). Хочу научиться оптимизировать такого рода вещи. Каковы наилучшие практики? (возможно, используется индекс для каждой метки (столбца) idk, как это реализовать) есть варианты со слотами но пока не понятно.
DataTable.vue

<template>
  <table class="table">
    <thead>
    <tr>
      <td v-if="showAdd">
      </td>
      <td class = "labels" v-for="(label, labelIndex) in labels" :key="labelIndex">
        {{ label.text }}
      </td>
      <td class="labels actions" v-if="showActions">
        Action
      </td>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item, itemIndex) in data" :key="itemIndex">
      <td v-if="showAdd">
          <b-icon icon="plus" class="add-btn" @click="$emit('add-item', item.name)">
          </b-icon>
      </td>
      <td v-for="(label, labelIndex) in labels" :key="labelIndex">
        {{ item[label.field] }}
      </td>
      <td class="actions" v-if="showActions">
        <ActionColumn :item="item"></ActionColumn>
      </td>
    </tr>
    </tbody>
  </table>
</template>
<script>

// Data and labels
import ActionColumn from "@/components/UI/ActionColumn.vue";

export default {
  name: "DataTable",
  components: {ActionColumn},
  props: {
    labels: {
      type: Array,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
    showActions: {
      type: Boolean,
      default: false
    },
    showAdd: {
      type: Boolean,
      default: false
    },
  },
}
</script>

ActionColum.vue (кнопки действий)

<template>
  <div>
    <router-link to="/dubplicate">
      <b-icon icon="files" variant="dark"></b-icon>
    </router-link>
    <router-link to="/delete">
      <b-icon icon="trash" variant="danger"></b-icon>
    </router-link>
    <router-link to="/edit">
      <b-icon icon="pencil" variant="dark"></b-icon>
    </router-link>
  </div>
</template>

Labs.vue

<template>
        <DataTable :labels="labels" :data="data" show-actions="true"/>
</template>

<script>
// Data and labels
const labels = [
  { text: "ID", field: 'id' },
  { text: "Name", field: 'name' },
  { text: "Description", field: 'description' },
]
const data = [
  { id: 10, name: 'Lab 1', description: 'Password Cracking' },
  { id: 11, name: 'Lab 13', description: 'SIEM and MISP machine' },
  { id: 15, name: 'Lab 15', description: 'AD auditing lab' },
  { id: 34, name: 'Lab 31', description: 'Threat Hunting and Investigation' },
];
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Labs",
  data() {
    return {
      labels: labels,
      data: data,
    };
  }
}
</script>