element-ui el-transfer添加拖拽排序功能

// html 部分

    
    
    

        提交
    


// js部分

value: number[] = []
data: Array<{ sort: number, key: number, label: string}> = [
   { sort: 1, key: 5001, label: '序号' },
   { sort: 2, key: 5002, label: '告警编号' },
   { sort: 3, key: 5003, label: '告警序号' },
   { sort: 4, key: 5004, label: '告警时间' },
   { sort: 5, key: 5005, label: '告警类型' }
]

formIndex: number = -1
formOption: any = null

// 官方的推荐写法中，renderFunc使用的jsx来写的，但是在vue2中使用jsx语法试了几次都不能通过ts的规则校验，
// 于是改用render
renderFunc(h, option) {
   let temp = `${option.label}`
    return h('span', {
        on: {
            'dragstart': ($event) => {
                this.formIndex = $event.target.__vue__.option.sort -1
                this.formOption = $event.target.__vue__.option
            },
            'dragover': ($event) => {
                $event.preventDefault();
                $event.dataTransfer.effectAllowed = "move";
                
            },
            'drop': ($event) => {
                let source = {
                    sort: $event.target.__vue__.option.sort,
                    key: this.formOption.key,
                    label: this.formOption.label
                }

                let target = {
                    sort: this.formIndex + 1,
                    key: $event.target.__vue__.option.key,
                    label: $event.target.__vue__.option.label
                }
                
                this.$set(this.data, this.formIndex, target)
                this.$set(this.data, $event.target.__vue__.option.sort -1, source)
            }
        },
        attrs: {
            draggable: true
        }
    }, temp)
}