title: Element UI table with dynamic columns
body: <p>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 <a href="http://element.eleme.io/#/en-US/component/table" rel="noreferrer">official Element UI table docs</a> show each and every column specified in the template.</p>
  
  <p>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 <code>delete</code> button.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div v-if="tableData.length &gt; 0"&gt;
      &lt;b-table striped hover v-bind:items="tableData" :fields=" keys.concat(['actions']) "&gt;
        &lt;template slot="actions" slot-scope="row"&gt;
          &lt;b-btn size="sm" @click.stop="tableClick(row.item)" class="mr-1"&gt;
            Delete
          &lt;/b-btn&gt;
        &lt;/template&gt;
      &lt;/b-table&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>In contrast, the Element UI Table examples all use multiple repeated <code>el-table-column</code> tags. Due to loading data with differing columns at runtime, I can't use this approach.</p>
  
  <pre><code>  &lt;template&gt;
      &lt;el-table
        :data="tableData"
        style="width: 100%"&gt;
        &lt;el-table-column
          prop="date"
          label="Date"
          width="180"&gt;
        &lt;/el-table-column&gt;
        &lt;el-table-column
          prop="name"
          label="Name"
          width="180"&gt;
        &lt;/el-table-column&gt;
        &lt;el-table-column
          prop="address"
          label="Address"&gt;
        &lt;/el-table-column&gt;
      &lt;/el-table&gt;
    &lt;/template&gt;
  </code></pre>
  
  <p>I'm a beginner and struggling to understand how to accomplish my goal with the el-table.</p>