SOURCE

new Vue({
    el: '#app',
    data() {
        return {
            list: [{
                id: '1',
                name: 'xxxx',
                age: 20
            }, {
                id: '2',
                name: 'yyyy',
                age: 21
            }, {
                id: '3',
                name: 'zzzzz',
                age: 222
            }],
            draggable: null
        }
    },
    created() {
        console.log('create====================')
        this.$nextTick(() => {
            this.initDraggable()
        })
    },
    methods: {
        initDraggable() {
            const _this = this
            const dom = document.querySelector('.el-table__body-wrapper tbody')
            this.draggable = Sortable.create(dom, {
                  onEnd({ newIndex, oldIndex }) {
                     const targetRow = _this.list.splice(oldIndex, 1)[0]
                        _this.list.splice(newIndex, 0, targetRow)

                    }
            })
        },
        handleAdd() {
            const id = parseInt(`${(Math.random() * 1001 + 3).toFixed(0)}`, 10)
            this.list.push({
                id,
                name: `新增项——${id}`,
                age: parseInt(`${(Math.random() * 100).toFixed(0)}`, 10)
            })
        }
    }
})

<div id="app">
    <el-table :data="list" border row-key="id">
        <el-table-column label="名字" prop="name"></el-table-column>
        <el-table-column label="年龄" prop="age"></el-table-column>
    </el-table>
    <el-button class="new" type="primary" @click="handleAdd">新增</el-button>
</div>

.el-table__header-wrapper th {
    background: #4e6ef2
}
.el-table thead {
    color: #ffffff;
}

.new {
    margin-top: 16px;
}