In el-dialog (display window), use Sortablejs to sort the table (el-table) in element without dragging.

such as headings,
I want to sort the form by dragging within el-dialog.
can be dragged if it is placed on the general surface.
indicates that I have correctly introduced sortablejs into
, but if I put the form on el-dialog,
drag sorting will become invalid.
from the console point of view,
I am sure to select the correct form,
but still can not solve the problem,
ask for a high point of reference.

<template>
    <div>
        <el-button @click="dialogFormVisible = true"></el-button>


        <el-dialog  :visible.sync="dialogFormVisible">
            <el-table row-key="date" ref="table" border :data="tableData" style="width: 100%" id="AA">
                <el-table-column prop="date" label="" width="180">
                </el-table-column>
                <el-table-column prop="name" label="" width="180">
                </el-table-column>
                <el-table-column prop="address" label="">
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>

</template>

<script>
    import Sortable from "sortablejs"

    export default {
        name: "inspection",//
        data(){
            return{
                dialogFormVisible: false,
                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 "
                }]
            }
        },
        mounted() {
            const el = document.querySelectorAll(".el-dialog .el-table__body-wrapper > table > tbody")[0]
            const self = this
            Sortable.create(el, {
                onEnd({ newIndex, oldIndex }) {
                    const targetRow = self.tableData.splice(oldIndex, 1)[0]
                    self.tableData.splice(newIndex, 0, targetRow)
                }
            })
        }
    }
</script>

<style scoped>

</style>

@ Spring Sugar less Ice how to solve


has the problem been solved

Menu