element ui el-tab 只显示第一个标签内容, 切换不会渲染，感觉是找不到ID
element ui el-tab 只显示第一个标签内容, 切换不会渲染，感觉是找不到ID
大佬求帮助
<template> <div class="view_region">
<el-row :gutter="10">
<el-col :span="12">
<span class="title">AlphaFold</span>
<el-tabs v-model="activeTab_af" type="border-card" style="padding: 0" @tab-click="changeTab_af">
<el-tab-pane :name="item" :label="'Model ' + (index + 1)" v-for="(item,index) in models_af" :lazy="true">
<!-- -->
<div class="view_3d" :id="item"></div>
</el-tab-pane>
</el-tabs>
</el-col>
<el-col :span="12">
<span class="title">RoseTTAFold</span>
<el-tabs v-model="activeTab_rt" type="border-card" @tab-click="changeTab_rt">
<el-tab-pane :name="item2" :label="'Model ' + (index2 + 1)" v-for="(item2,index2) in models_rt" :lazy="true">
<div :id="item2" style="height: 400px; width: 100%;" v-if="activeTab_rt===item2"></div>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</div>
</template>
<script>
var NGL = require('ngl');
export default {
data() {
return {
activeTab_af: 'model_af1',
activeTab_rt: 'model_rt1',
models_af: ['model_af1', 'model_af2', 'model_af3', 'model_af4', 'model_af5'],
models_rt: ['model_rt1', 'model_rt2', 'model_rt3', 'model_rt4', 'model_rt5'],
loadFile_af: 'rcsb://1CRN',
fileObj: {
'model_af1': 'rcsb://1CRN',
'model_af2': 'rcsb://7bv2',
'model_af3': 'rcsb://1CRN',
'model_af4': 'rcsb://7bv2',
'model_af5': 'rcsb://1CRN',
'model_rt1': 'rcsb://7bv2',
'model_rt2': 'rcsb://1CRN',
'model_rt3': 'rcsb://1CRN',
'model_rt4': 'rcsb://1CRN',
'model_rt5': 'rcsb://1CRN',
}
}
},
//
mounted() {
this.ngl_view('model_af1')
this.ngl_view('model_rt1')
// this.ngl_view('model_af2') ## 添加就会出错
// this.ngl_view('model_rt2')
},
methods: {
changeTab_af() {
// this.$message.success(this.activeTab_af)
this.ngl_view(this.activeTab_af)
},
changeTab_rt: function (tab, event) {
// this.$message.success(this.activeTab_rt)
this.ngl_view(this.activeTab_rt)
},
ngl_view(item) {
// create a `stage` object
// this.$message.success(item)
let stage = new NGL.Stage(item);
// // load a PDB structure and consume the returned `Promise`
stage.loadFile(this.fileObj[item])
.then(function (o) {
// add a "cartoon" representation to the structure component
// 0.addRepresentation("cartoon");
o.addRepresentation("cartoon", { color: 'chainid' });
// provide a "good" view of the structure
o.autoView();
});
},
},
}
</script>
<style lang="less" scoped>
.view_region {
padding-top: 10px;
.title {
display: flex;
text-align: center;
justify-content: center;
padding-bottom: 5px;
}
}
.el-tabs--border-card>.el-tabs__content {
padding: 0px;
}
.el-tabs {
padding: 0px;
.content {
height: 100%;
width: 100%;
padding: 0px;
}
}
.view_3d {
width: 100%;
height: 400px;
display: flex;
justify-content: center;
padding: 0;
margin: 0;
}
</style>
console的错误
log.js?1afd:24 [HMR] Waiting for update signal from WDS...ngl.esm.js?af5c:20935 THREE.WebGLRenderer 86
ngl.esm.js?af5c:20935 THREE.WebGLRenderer 86
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'getBoundingClientRect' of null"
found in
---> <ElTabs> at packages/tabs/src/tabs.vue
<ElCol>
<ElRow>
<StructureResults> at src/components/structure/structure_results.vue
<ElMain> at packages/main/src/main.vue
<ElContainer> at packages/container/src/main.vue... (2 recursive calls)
<Home> at src/components/Home.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1893
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1871
invoker @ vue.runtime.esm.js?2b0e:2188
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
Vue.$emit @ vue.runtime.esm.js?2b0e:3903
handleTabClick @ index.js?9e2f:1
click @ index.js?9e2f:1
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
invoker @ vue.runtime.esm.js?2b0e:2188
original._wrapper @ vue.runtime.esm.js?2b0e:6961
vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read property 'getBoundingClientRect' of null
at new Viewer (ngl.esm.js?af5c:50323)
at new Stage (ngl.esm.js?af5c:73559)
at VueComponent.ngl_view (structure_results.vue?47cd:83)
at VueComponent.changeTab_af (structure_results.vue?47cd:69)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863)
at VueComponent.invoker (vue.runtime.esm.js?2b0e:2188)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863)
at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3903)
at VueComponent.handleTabClick (index.js?9e2f:1)
at click (index.js?9e2f:1)
logError @ vue.runtime.esm.js?2b0e:1897
globalHandleError @ vue.runtime.esm.js?2b0e:1888
handleError @ vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1871
invoker @ vue.runtime.esm.js?2b0e:2188
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
Vue.$emit @ vue.runtime.esm.js?2b0e:3903
handleTabClick @ index.js?9e2f:1
click @ index.js?9e2f:1
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863
invoker @ vue.runtime.esm.js?2b0e:2188
original._wrapper @ vue.runtime.esm.js?2b0e:6961
以上是 element ui el-tab 只显示第一个标签内容, 切换不会渲染，感觉是找不到ID 的全部内容， 来源链接： utcz.com/p/935901.html
