Vue操作Dom后，数据和视图展示的不一样（拖拽排序）（iview树组件）

Question

项目里有个需求是树组件要进行节点的拖拽排序
拖拽完成后，数据排序正确，但是视图层并不是按照数据顺序渲染（不是双向绑定吗）
点击树组件的收起展开后，显示正常，看了源组件，用了v-if指令，重新写了dom

源组件里面watch触发了两次，在mouseup事件（做了数据排序）

如果同一个 watcher 被多次触发，只会被推入到队列中一次。
不知是不是这个原因，是的话怎么解决

<template>
    <div>
        <Tree :data="getTreeData" :render="sel" ref="tree"></Tree>
    </div>

</template>

<script>
    import { mapGetters } from 'vuex'
    export default {
        name: "tree",
        data(){
            return {
                saveVal:'',
                originNode:'',
            }
        },
        props:['name'],
        computed:{
            ...mapGetters([
                'getTreeData'
            ])
        },
        watch:{

        },
        methods:{
            sel(h,{root,node,data}){
                if(this.name === 'set'){
                    return this.renderContentSet(h,{root,node,data})
                }else if(this.name === 'relation'){
                    return this.renderContentPack(h,{root,node,data})
                }else{
                    return this.renderContentDel(h,{root,node,data})
                }
            },
            renderContentSet(h,{root,node,data}){ //书本编辑树
                return h('div',{
                            class:['hover','clear'],
                            style:{display:'inline-block',userSelect:'none'}
                        },[
                            h('span',{
                                style:{fontSize:'16px',cursor:'pointer',float:'left'},
                                on:{
                                    mousedown:(e)=>{
                                        if($(e.target).attr('contentEditable')){return;}
                                        if( e.which !== 1 ){return;}
                                        let sY = e.clientY,sTop,targetNode,cloneNode,hasClone = 1;
                                        const parentKey = root.find(el => el === node).parent !== 'undefined' ? root.find(el => el === node).parent : '';
                                        if(parentKey === 0 || parentKey){
                                            const parent = root.find(el => el.nodeKey === parentKey).node;
                                            const index = parent.children.indexOf(data);
                                            targetNode = $(e.target).parent().parent().parent();
                                            cloneNode = targetNode.clone().empty().css({'height': targetNode.height() +'px',margin:'8px 0'});
                                            sTop = targetNode.position().top;
                                            let obj = {sY,targetNode,cloneNode,sTop,hasClone,index,parent};
                                            this.dragNode(root,node,data,obj)
                                        }else{

                                        }
                                    }
                                }
                            },data.title),
                            h('div',{ class:['iconShow'],style:{display:'none',marginLeft:'5px',cursor:'pointer',float:'left'} },[
                                h('Button',{
                                    props:{type:'ghost',icon:'ios-plus-empty',size:'small'},
                                    style:{marginRight:'5px'},
                                    on:{
                                        click:()=>{ this.addNode(data) }
                                    }
                                }),
                                h('Button',{
                                    props:{type:'ghost',icon:'ios-compose',size:'small'},
                                    style:{marginRight:'5px'},
                                    on:{
                                        click:(e)=>{ this.changeTitle(e,data) }
                                    }
                                }),
                                h('Button',{
                                    props:{type:'ghost',icon:'ios-close-empty',size:'small'},
                                    style:{marginRight:'5px'},
                                    on:{
                                        click:()=>{ this.deleteNode(root,node,data) }
                                    }
                                })
                            ]),
                        ])
            },
            addNode(data){ //添加节点
                const children = data.children || [];
                data.expand = true;
                children.push({title:'未定义标题',expand:true});
                this.$set(data, 'children', children);
            },
            changeTitle(e,data){ // 改变标题
                $(e.target).parents('.iconShow').siblings('span').attr('contentEditable','true').focus();
                $(e.target).parents('.iconShow').siblings('span').blur(function(){
                    if(!$(this).html()){
                        $(this).html( data.title )
                    }else{
                        data.title = $(this).html()
                    }
                    $(this).removeAttr('contentEditable')
                });
            },
            deleteNode(root, node, data) { // 删除节点
                if(data.children && data.children.length > 0){
                    this.$Modal.error({
                        title: '提示',
                        content: '存在子目录，无法删除'
                    });
                    return;
                }
                const parentKey = root.find(el => el === node).parent !== 'undefined' ? root.find(el => el === node).parent : '';
                if(parentKey === 0 || parentKey){
                    const parent = root.find(el => el.nodeKey === parentKey).node;
                    const index = parent.children.indexOf(data);
                    parent.children.splice(index, 1);
                }else{
                    for(let i=0;i<this.getTreeData.length;i++){
                        if(data.id===this.getTreeData[i].id){
                            this.getTreeData.splice(i,1);
                            break;
                        }
                    }
                }
            },
            dragNode(root,node,data,obj){ //拖拽节点
                let This = this;
                document.onmousemove = function(e){
                    let nY = e.clientY,top,prev,next,scrollTop = obj.targetNode.parents('.TabPane').scrollTop();
                    if(obj.hasClone){
                        obj.targetNode.before(obj.cloneNode).css({
                            'position':'absolute',
                            'width':'auto',
                        }).appendTo(obj.targetNode.parent());
                        obj.hasClone = 0;
                    }

                    top = obj.sTop + nY - obj.sY ;

                    obj.targetNode.css({
                        top: top + 'px'
                    });

                    prev = obj.cloneNode.prev().not('.hover');
                    next = obj.cloneNode.next().not( obj.targetNode );

                    //向上排序
                    if(prev.length && scrollTop + top < prev.position()['top'] + prev.outerHeight()/2){
                        obj.cloneNode.after(prev)
                    }
                    //向下排序
                    if(next.length && scrollTop + top > next.position()['top'] + next.outerHeight()/2 - 20){
                        obj.cloneNode.before(next)
                    }

                };
                document.onmouseup = function(e){
                    if( !obj.hasClone ){
                        let i = obj.cloneNode.index()-2;
                        obj.cloneNode.before(obj.targetNode.removeAttr('style')).remove();

                        This.findNode(This.getTreeData,obj.parent);
                        if(i - obj.index >= 0) {
                            This.originNode.children.splice(i+1,0,This.originNode.children[obj.index]);
                            This.originNode.children.splice(obj.index,1)
                        }else{
                            This.originNode.children.splice(i,0,This.originNode.children[obj.index]);
                            This.originNode.children.splice(obj.index + 1,1)
                        }

                        This.$set(obj.parent,'children',This.originNode.children)

                        // obj.parent.children.splice(0,obj.parent.children.length);
                        //
                        // This.originNode.children.forEach(function(item){
                        //     obj.parent.children.push(item)
                        // });

                        // This.$set(This.getTreeData[0],'children',[])
                        // setTimeout(function(){
                        //     This.$set(obj.parent,'children',This.originNode.children)
                        // },60)
                    }
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            },
            findNode(root,node){ //递归查找节点
                for(let item of root){
                    if(item.id !== node.id){
                        if(item.children){
                            this.originNode = JSON.parse(JSON.stringify(item.children))
                            this.findNode(this.originNode,node)
                        }
                    }else{
                        return this.originNode = JSON.parse(JSON.stringify(item))
                    }
                }
            },
            renderContentPack(h,{root,node,data}){ //书本关联树

            },
            renderContentDel(h,{root,node,data}){ // 书本详情树
                return h('div',{
                    class:['treeBox'],
                    style:{display:'inline-block',width:'100%'},
                    on:{click:()=>{}}
                },[
                    data.ultima ? h('span',{
                            class:[this.publishStatus(data).class],
                            style:{marginRight:'5px',padding:'0 5px',color:'#fff',borderRadius:'2px'}
                        },this.publishStatus(data).text) : '',
                    h('span',{ class:['cite'] },data.title),
                    h('span', { class:['treeBadge'] } ,data.count)
                ])
            },
            publishStatus(data){ // 判断书本状态
                let obj = {};
                switch (data.publishStatus){
                    case 0:
                    case 1:
                        obj.class = 'pink';
                        obj.text = '录入中';
                        break;
                    case 2:
                        obj.class = 'yellow';
                        obj.text = '待校对';
                        break;
                    case 3:
                        obj.class = 'yellow';
                        obj.text = '校对中';
                        break;
                    case 4:
                        obj.class = 'green';
                        obj.text = '已校对';
                        break;
                    case 5:
                        obj.class = 'green';
                        obj.text = '已发布';
                        break;
                    default:
                        obj.text = '未知状态';
                        break
                }
                return obj
            },
        },
        mounted(){
            console.log(this.$refs.tree)
        }
    }
</script>

<style scoped>

</style>

Answer 1

可以使用官方推荐的nextTick 函数来执行拖曳后的回调 官方文档：https://cn.vuejs.org/v2/api/#...