web-dev-qa-db-ja.com

動的列を持つ要素UIテーブル

すべての列をハードコーディングせずに、Element UIテーブルコンポーネントを使用する例を探しています。 official Element UI table docs を含む、私が見たすべての例は、テンプレートで指定されたすべての列を示しています。

私はこのようなことをしようとしています。私の古いテーブルコンポーネントでは、これにより、すべての列とdeleteボタンが付いた追加の終了列が得られます。

<template>
  <div v-if="tableData.length > 0">
    <b-table striped hover v-bind:items="tableData" :fields=" keys.concat(['actions']) ">
      <template slot="actions" slot-scope="row">
        <b-btn size="sm" @click.stop="tableClick(row.item)" class="mr-1">
          Delete
        </b-btn>
      </template>
    </b-table>
  </div>
</template>

対照的に、要素UIテーブルの例はすべて、複数のel-table-columnタグの繰り返しを使用しています。実行時に異なる列を含むデータをロードするため、この方法は使用できません。

  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="Date"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="Address">
      </el-table-column>
    </el-table>
  </template>

私は初心者で、el-tableで目標を達成する方法を理解するのに苦労しています。

vue.jsvuejs2element-ui
3
BugBuddy

必要なプロパティを持つオブジェクトの配列として列を持ち、v-forを使用してテンプレート内でそれらを反復できます。

<template>
    <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column v-for="column in columns" 
                         :key="column.label"
                         :prop="column.prop"
                         :label="column.label"
                         :formatter="column.formatter"
                         :min-width="column.minWidth">
        </el-table-column>
        <el-table-column fixed="right">
            <template slot-scope="scope">
              ... your delete button or whatever here...
            </template>
    </el-table-column>
    </el-table>
</template>

そして、あなたはどこかからあなたの列を取得します、それらは例えばデータにあるかもしれません：

data() {
    return {
      columns: [
        {
          prop: 'date',
          label: 'Date',
          minWidth: 180px
        },
        {
          prop: 'name',
          label: 'Name',
          minWidth: 180px
        },
        {
          prop: 'address',
          label: 'Address',
          formatter: (row, col, cell, index) => this.addressFormatter(cell),  //example of a formatter
        },
      ],
    };
},
5
Anoiny