ele table 动态列

Question

想实现一个拖拽动态改变列的功能

现在拖拽已经用draggable 实现，表头列的数组也会随着拖动的改变而改变。
但是现象是table 的列并没有随着变化

table 表头代码如下：

拖拽调整顺序代码如下：

Answer 1

Answer 2

<template>

<div>
    <el-table
            :data="tableData"
            stripe
            style="width: 100%">
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>

        <el-table-column :key='fruit' v-for='fruit in formThead' :label="fruit" >
            <template slot-scope="scope">
                {{scope.row[fruit]}}
            </template>
        </el-table-column>


    </el-table>

    <el-button @click="test" type="primary" size="small"
               style="margin-top: 10px;margin-bottom: 5px">
        <i style="margin-right: 5px" class="el-icon-circle-plus-outline"></i>新增项目
    </el-button>

</div>

</template>

<script>

export default {
    data() {
        return {
            formThead :['date','name','address'],
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    methods:{
        test(){
            this.formThead =  ['name','date','address'];
        },
    }
}

</script>
缩小范围 发现是formThead 数据顺序的改变 并没有出发table重新绘制 这是为什么呢