鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ ele table 動態(tài)列

ele table 動態(tài)列

想實現(xiàn)一個拖拽動態(tài)改變列的功能

現(xiàn)在拖拽已經(jīng)用draggable 實現(xiàn)，表頭列的數(shù)組也會隨著拖動的改變而改變。
但是現(xiàn)象是table 的列并沒有隨著變化

table 表頭代碼如下：

clipboard.png

拖拽調(diào)整順序代碼如下：

clipboard.png

回答
編輯回答
萌小萌

<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: '上海市普陀區(qū)金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀區(qū)金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀區(qū)金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀區(qū)金沙江路 1516 弄'
            }]
        }
    },
    methods:{
        test(){
            this.formThead =  ['name','date','address'];
        },
    }
}

</script>
縮小范圍 發(fā)現(xiàn)是formThead 數(shù)據(jù)順序的改變 并沒有出發(fā)table重新繪制 這是為什么呢

2017年5月4日 15:17
編輯回答
負(fù)我心

clipboard.png

2018年8月26日 10:10