创建动态表的简单方法

Question

我用这种方式创建表：

首先我将我的子组件作为整个表格整理器

<div class="table-responsive hidden-xs">
  <table class="table table-striped" :class="tableClass">

    <!-- header -->
    <thead class="bg-primary">
      <tr class="text-nowrap">
        <th v-for="item in columnData" v-if="!item.hide && !item.disable">
          <div @click="sort(item.key)" v-if="item.sort" class="cursor-pointer">
            <span v-html="item.title"></span>
            <span v-if="params.column === item.key">
              <span v-if="params.direction === 'asc'"><i class="icon-sort-amount-asc"></i></span>
              <span v-else><i class="icon-sort-amount-desc"></i></span>
            </span>
            <span class="icon-sort text-muted" v-else></span>
          </div>
          <div v-else>
            <span v-html="item.title"></span>  
          </div>
        </th>
      </tr>
    </thead>

    <!-- loading body -->
    <tbody v-if="itemDataStat === 'loading'">
      <tr>
        <td :colspan="columnData.length">
          <div class="progress">
            <div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 100%">
              <span class="sr-only">100% Complete</span>
            </div>
          </div>
        </td>
      </tr>
    </tbody>

    <!-- data body -->
    <tbody v-for="(items,index) in groupData" v-else-if="itemDataStat === 'success'" @contextmenu.prevent = "$refs.menu.open">
      <tr class="active border-double" v-if="group.show">
        <td :colspan="columnData.length">
          Kelompok {{ group.title }}: <b>{{index}}</b>
        </td>
      </tr>
      <slot name="item-desktop" v-for="(item,index) in items" :item="item" :index="index"></slot>
    </tbody>

    <!-- error body -->
    <tbody v-else-if="itemDataStat === 'fail'">
      <tr>
        <td :colspan="columnData.length">
          Oops.. Terjadi kesalahan, silahkan coba lagi.
        </td>
      </tr>
    </tbody>
  </table>
</div>

从那里我只是将这个表组件导入到我的页面中，然后执行此操作

<template slot="item-desktop" slot-scope="props">
    <tr :class="{ 'info': selectedItem.id === props.item.id }" class="text-nowrap" @click="selectedRow(props.item)">
        <td>
            {{ props.index + 1 + (+itemData.current_page-1) * +itemData.per_page + '.'}}
        </td>
        <td v-if="!columnData[1].hide">
            <img :src="'/images/' + kelas + '/' + props.item.picture + 'n.jpg'" class="img-rounded img-responsive img-sm" v-if="props.item.picture">
            <img :src="'/images/no_image.jpg'" class="img-rounded img-responsive img-sm" v-else>
        </td>
        <td v-if="!columnData[2].hide">
            <check-value :value="props.item.name"></check-value>
        </td>
        <td v-if="!columnData[3].hide">
            <check-value :value="props.item.price1"></check-value>
        </td>
        <td v-if="!columnData[4].hide">
            <check-value :value="props.item.price2"></check-value>
        </td>
        <td v-if="!columnData[5].hide">
            <check-value :value="props.item.discount"></check-value>
        </td>
        <td v-if="!columnData[6].hide" v-html="$options.filters.dateTime(props.item.created_at)"  class="text-nowrap"></td>
        <td v-if="!columnData[7].hide">
            <span v-if="props.item.created_at !== props.item.updated_at" v-html="$options.filters.dateTime(props.item.updated_at)"></span>
            <span v-else>-</span>
        </td>
    </tr>
</template>

和columnData数组一样是

columnData: [
    {
        title: 'No.',
        key: 'No.',
        excelType: 'string',
        sort: false,
        hide: false,
        disable: false
    },
    {
        title: 'Image',
        key: 'picture',
        excelType: 'string',
        sort: false,
        hide: false,
        disable: false
    },
    {
        title: 'Nama',
        key: 'name',
        excelType: 'string',
        sort: true,
        hide: false,
        disable: false,
        filter: true,
        filterType: 'string',
    },
    {
        title: 'Seller 1 Price',
        key: 'price1',
        excelType: 'string',
        sort: true,
        hide: false,
        disable: false
    },
    {
        title: 'Seller 2 Price',
        key: 'price2',
        excelType: 'string',
        sort: true,
        hide: false,
        disable: false
    },
    {
        title: 'Discount',
        key: 'discount',
        excelType: 'string',
        sort: false,
        hide: false,
        disable: false
    },
    {
        title: 'Created',
        key: 'created_at',
        sort: true,
        hide: false,
        disable: false
    },
    {
        title: 'Updated',
        key: 'updated_at',
        sort: true,
        hide: false,
        disable: false
    }
],

我也有通过将columnData[].hide值更改为true来隐藏列的方法，它不会显示/隐藏列标题和列主体

一切正常，但当我在一个表中有越来越多的列时，那将是一个重复的任务。所以还有更优雅的方式吗？只做一些循环？