Element UI table with dynamic columns

Question

I'm looking for an example of using the Element UI table component without having to hard code all the columns. All the examples I have seen, including the official Element UI table docs show each and every column specified in the template.

I'm trying to do something like this. In my old table component, this gives me all the columns and my extra end column with a delete button.

<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>

In contrast, the Element UI Table examples all use multiple repeated el-table-column tags. Due to loading data with differing columns at runtime, I can't use this approach.

  <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>

I'm a beginner and struggling to understand how to accomplish my goal with the el-table.

Answer 1

You can have the columns as an array of objects with needed properties and iterate over them in the template with 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>

and then you get your columns from somewhere, they could be in the data for example:

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
        },
      ],
    };
},