element-ui table with dynamic columns layout

el-table-dyn.css

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

el-table-dyn.html

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<template>
  <button @click="moveCol('date')">
    move
  </button>

  <el-table ref="table" :data="tableData" stripe style="width: 100%">
    <el-table-column v-for="column in columns" 
                     :key="column.prop"
                     :prop="column.prop"
                     :label="column.label"
                     :formatter="column.formatter"
                     :min-width="column.minWidth">
    </el-table-column>
  </el-table>
</template>
</div>

el-table-dyn.js

var Main = {
    data() {
      return {
        columns: [
          {
            prop: 'date',
            label: 'Date',
            minWidth: '100px'
          },
          {
            prop: 'name',
            label: 'Name',
            minWidth: '150px'
          },
          {
            prop: 'address',
            label: 'Address',
          },
        ],      
      
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-02',
          name: 'Yum',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Num',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-01',
          name: 'Loom',
          address: 'No. 189, Grove St, Los Angeles'
        }]
      }
    },
    methods: {
      moveListItem (list, index, amount) {
        list.splice(index + amount, 0, list.splice(index, 1)[0]) 
      },
      moveCol(prop) {
        const index = this.columns.findIndex(col => col.prop === prop)
        console.log('moveCol()', index)
        if (index > -1 ) {
          this.moveListItem(this.columns, index, 1)
          this.$nextTick(() => {
            this.$refs['table'].doLayout()
            console.log('this.columns', JSON.stringify(this.columns))
          })
          
        }

      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

jsfiddle.lnk

https://jsfiddle.net/koolahoop/ao26x3jL/#&togetherjs=sHyc4uio1j