如上图:我们当前页面的结构分为左右两部分,左边是带搜索功能的一个树结构,点击每一项,左侧树都会有一个淡蓝色的背景色,同时右边文件预览显示onlyoffice页面详情。
因为当前树只有一层子级,所以改el-tree为div循环生成。
<div style="
height: 580px;
overflow-y: auto;
">
<div v-for="(item, index) in helpData" :key="index" style="display: flex;align-items: baseline;">
<span :title="item.name" style="
width: 250px;
overflow: hidden;
white-space: nowrap;
display: inline-block;
text-overflow: ellipsis;
font-family: PingFangSC-Regular, PingFang SC;
color: #262626;
cursor: pointer;
margin-left: 20px;
font-size: 14px;
margin-top: 10px;
" class="clickSpan" @click="checkBox(item, index)">{{ item.name }}</span>
<span class="el-icon-download" style="margin-left: 18px; margin-top: 10px; cursor: pointer" @click.stop="download(item.name, item.ossUrl)">
</span>
</div>
</div>
问题:需要在页面刚加载的时候就展示右边的文件预览,同时给第一个子级添加背景色。
(右边项目预览页面是通过左边点击展示的,所以我们需要在页面刚加载完时就调用方法,传当前子级数组的第0项进去,再通过js添加类名;结果发现获取不到当前树的nodelist,打印出来length为0)
//展示onlyoffice
checkBox (item, index) {
let target = document.querySelectorAll('.clickSpan')
if (target.length != 0) {
for (let i = 0; i < target.length; i++) {
target[i].parentNode.classList.remove("actived");
}
target[index].parentNode.classList.add("actived");
}
if (
item.name.includes(".pdf") ||
item.name.includes(".xls") ||
item.name.includes(".xlsx") ||
item.name.includes(".docx") ||
item.name.includes(".doc")
) {
this.$refs.attachRef.modalVisible = false;
this.$nextTick(() => {
this.$refs.attachRef.init(item.oss, item.name);
});
} else {
this.$message.error("暂不支持预览!");
}
},
解决:查找后发现,是当前步骤异步所致,使用this.$nextTick()解决。
// 帮助文档树
getHelpTree () {
api.helpTreeApi({ name: '' }).then((res) => {
this.helpData = res.data.body.children;
this.$nextTick(() => {
this.checkBox(this.helpData[0], 0)
})
});
},