关于同步异步导致的页面样式问题(项目经验记录)

文章描述了如何在页面刚加载时即显示OnlyOffice文件预览,并为第一个子级添加背景色。遇到的问题在于异步获取数据导致Nodelist为空,通过`this.$nextTick()`解决了这个问题。作者还分享了获取帮助文档树的API请求和处理过程。
摘要由CSDN通过智能技术生成

如上图:我们当前页面的结构分为左右两部分,左边是带搜索功能的一个树结构,点击每一项,左侧树都会有一个淡蓝色的背景色,同时右边文件预览显示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)
          })
        });
      },

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值