< 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 >
narrow the range and find that the change in the order of formThead data does not start table redrawing. Why