关于VUE引用，异步的，界面加载显示原文的问题
管理大大我们用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();
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();
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，可以隐藏它。然后在后面插入你自己的对象。
论坛管理员 发表于 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没定义。 本帖最后由 论坛管理员 于 2023-3-1 16:51 编辑
o2.load不支持同步加载
这个方式可以同步引入js
//jsPath:js路径
new Request({
url: o2.filterUrl(jsPath), async: false, method: "get"
}).send();
页:
[1]