关于VUE引用，异步的，界面加载显示原文的问题

leo-007

管理大大

我们用vue实现了一个datatable里面，用textfield存数据，界面使用vue渲染的，在queryload里面引入如下：

o2.loadCss('/o2_lib/vue/element/index.css');
o2.load(['/o2_lib/vue/vue.js', '/o2_lib/vue/element/index.js']);

然后在datatable的postload事件里面写的vue处理代码：

var currentNode = this.target.node;
var line = this.target.parentLine;
var lineIndex = line.getIndex();
var timerStr = new Date().getTime();
var classNameStr = `data-td-${this.target.json.pid.replace('$','')}-${lineIndex}`;
var that = this;
var isShowOprationBtn = line.options.isEdited; //是否编辑中
o2.loadCss('/o2_lib/vue/element/index.css');
o2.load(['/o2_lib/vue/vue.js', '/o2_lib/vue/element/index.js'], function(){
    currentNode.innerHTML = `
        <style>
        .${classNameStr}{
             text-align: left;
        }

        .${classNameStr} *{
            box-sizing: border-box!important;
        }
      
        .${classNameStr}-ul li{
            list-style: none;
            padding:0 10px;
            display:flex;
            align-items:center;
        }
        .${classNameStr}-ul li .handerBtn{
            cursor:pointer;
            font-size:22px;
        }
        .${classNameStr}-input-number{
            width:100px;
        }
        </style>
        <div class="${classNameStr}">
            <ul class="${classNameStr}-ul">
                    <li v-for="(item, i) in list">
                        <el-input class="${classNameStr}-input-number" v-model="item.value" size="mini" @change="handleChange" v-if="isShowOprationBtn"></el-input>
                        <span v-if="!isShowOprationBtn">{{item.value}}</span>
                        <i class="el-icon-remove-outline handerBtn" v-if="list.length > 1 && isShowOprationBtn" @click="removeLi(item, i)"></i>
                        <i class="el-icon-circle-plus-outline handerBtn" v-if="i === list.length - 1 && isShowOprationBtn" @click="addLi"></i>
                    </li>
            </ul>
        </div>
        `

        if(document.querySelector('.' + classNameStr)){
            new Vue({
                el: '.' + classNameStr,
                data: {
                    list: [],
                    isShowOprationBtn: isShowOprationBtn //是否编辑中
                },
                mounted(){
                    //首次进来如果之前没有存数据，就读取数据
                    var data = line.getData().neix_long;
                    //console.log('data:', data);
                    if(data){
                        this.list = JSON.parse(data);
                    }else{
                        this.list = [{value:''}]
                    }
                    this.saveData();
               
                },
                methods:{
                    //数据改变
                    handleChange(val){
                        //console.log('val', val);
                        this.saveData();
                    },

                    //添加其他列的行的公共方法
                    addLiCommonFunc(fieldName){
                        var otherColData = line.getData()[fieldName];
                        if(!otherColData){
                            otherColData = [];
                        }else{
                            otherColData = JSON.parse(otherColData);
                        }
                        otherColData.push({value:''})
                        line.get(fieldName).setData(JSON.stringify(otherColData));
                    },

                    //新增一行
                    addLi(){
                        this.list.push({value:''})
                        this.addLiCommonFunc('neix_width');         
                        this.saveData();
                    },

                    //删除其他列数据公共方法
                    removeLiCommonFunc(fieldName,i){
                        var otherColData = line.getData()[fieldName];
                        if(!otherColData){
                            otherColData = [];
                        }else{
                            otherColData = JSON.parse(otherColData);
                        }
                        otherColData.splice(i, 1);
                        line.get(fieldName).setData(JSON.stringify(otherColData));
                    },

                    //删除一行
                    removeLi(item,i){
                        this.list.splice(i, 1);
                        this.removeLiCommonFunc('neix_width',i);      
                        this.saveData()
                    },

                    initOtherVue(otherVue){
                        //另一个vue组件初始化数据
                        if(otherVue){
                        otherVue.init();
                        }
                    },

                    //保存数据到datatable组件对象中
                    saveData(){
                        //console.log('line.get("neix_long"):', line.get("neix_long"));
                        if(line.get("neix_long")){
                            line.get("neix_long").setData(JSON.stringify(this.list));
                        }
                        
                        //保存另一个组件的数据
                        // var textfield_1_data = line.get("textfield_1").getData();
                        // line.get("textfield_1").setData(JSON.stringify(textfield_1_data));

                        //另一个vue组件初始化数据
                        this.initOtherVue(that.neix_width_vue); //可复制多个

                    }
                }
            });
        }
});

现在经常vue加载的比datatable慢，出现截图的问题：


请问管理员大大有什么解决方案吗？

论坛管理员

抱歉，在没有上下文的情况，通过你这边的描述我只能猜你的问题：

datatable的数据如果不是异步获取的，那么它的生成是同步的。而postload事件是datatable加载完成后执行的，因此在postload事件vue加载比datable慢才是正常的。
个人建议不要直接替换textfield的node，可以隐藏它。然后在后面插入你自己的对象。

leo-007

论坛管理员 发表于 2023-3-1 10:05
抱歉，在没有上下文的情况，通过你这边的描述我只能猜你的问题：

datatable的数据如果不是异步获取的，那 ...

o2.loadCss('/o2_lib/vue/element/index.css');
o2.load(['/o2_lib/vue/vue.js', '/o2_lib/vue/element/index.js']);
请问这个，可以同步加载吗？
我们猜测：现在出现的问题就是这个vue的这些文件还没加载好，datatable就开始加载了，然后提示vue没定义。

论坛管理员

o2.load不支持同步加载

这个方式可以同步引入js

//jsPath:js路径
new Request({
    url: o2.filterUrl(jsPath), async: false, method: "get"
}).send();