Sortable+Element表格拖拽排序_drawer无法拖拽文件

<template>
    <el-drawer
        title="属性排序(上下拖拽表格行即可)"
        :visible.sync="dialogVisible"
        @close="closeDialog"
        :append-to-body="true"
        class="scroll"
        :wrapperClosable="false"
        size="60%">
        <el-table
            :data="form.properties"
            row-key="propertiesKey"
            border
            stripe
            v-loading="loading"
            class="sort-table"
            style="width: 100%"
        >
            <el-table-column
                label="序号"
                type="index"
                align="center"
                width="50">
            </el-table-column>
            <el-table-column
                label="key"
                align="center"
                prop="propertiesKey"
            >
            </el-table-column>
            <el-table-column
                label="名称："
                align="center"
                show-overflow-tooltip
                prop="title"
            >
            </el-table-column>
        </el-table>
        <div class="drawer-footer text-center" style="margin-top: 30px;">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button
                type="primary"
                @click="submit()"
                :loading="loading">确 定</el-button>
        </div>
    </el-drawer>
</template>

<script>
import api from '@/api/version/object_model.js'
import Sortable from 'sortablejs'
export default {
 
    data() {
        return {
            dialogVisible: false,
            loading: false,
            form: {
                properties: [], // 属性
            },
        }
    },
    mounted() {
        this.getDetails()
        this.dialogVisible = this.show
        this.commonModelId = this.info
    },
    methods: {
        // 行拖拽
        rowDrop() {
            const tbody = document.querySelector('.sort-table tbody')
            const _this = this
            Sortable.create(tbody, {
                // 官网上的配置项,加到这里面来,可以实现各种效果和功能
                animation: 150,
                ghostClass: 'blue-background-class',
                onEnd({ newIndex, oldIndex }) {
                    const currRow = _this.form.properties.splice(oldIndex, 1)[0]
                    _this.form.properties.splice(newIndex, 0, currRow)
                    _this.form.properties.forEach((item, index) => {
                        item.propSort = index
                    })
                    console.log(_this.form.properties)
                }
            })
        },
      
        // 详情
        getDetails() {
            api.getInfoCommonById({
                id: this.commonModelId
            }, (data) => {
                this.$utils.assignKey(this.form, data.data)
                this.rowDrop()
            }, (error) => {
                console.log(error)
            })
        },
        // 提交
        submit() {
           
        },
       
    },
}
</script>

<style lang="scss">
    .json-format-content li:nth-child(even) {
        background-color: rgb(248, 248, 248);
    }
    .sort-table {
        .el-drawer__body .el-table thead th {
            font-size: 33px;
            padding: 12px 0;
        }
        .el-table td, .el-table th {
            padding: 20px 0;
            font-size: 33px;
        }
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

注意： 我的table加了样式 class=“sort-table”，所以const tbody = document.querySelector(’.sort-table tbody’)，如果你没有新加样式，可以使用：const tbody = document.querySelector(’.el-table__body-wrapper tbody’)