202401

小谭的成长日记
118 阅读1分钟

  • 12.(20240202) 表格滚动条剧烈抖动问题:数据不断在计算

背景:见第11条 原因:滚动条滚动时,会对当前页面元素进行重新渲染,而我之前的处理涉及元素的样式计算 解决:只在数据渲染完成之后触发一次样式计算

//html
<el-table-column
            prop="AnswerContent"
            :label="$t('hcp_inspection_options_name')"
            column-key="AnswerContent"
          >
            <template slot-scope="scope">
              <div class="AnswerContent-options-box">
                <div
                  class="for-computed-width-box"
                  :id="`for-computed-width-box-${scope.row.ID}`"
                >
                  <div
                    class="AnswerContent-option-item-box"
                    :id="`AnswerContent-option-item-box-${scope.row.ID}`"
                  >
                    <div
                      v-for="item in scope.row.AnswerContent"
                      :key="item.ID"
                      :title="computedScore(scope.row,item)"
                      class="AnswerContent-option-item text-ellipsis"
                    >
                      {{ computedScore(scope.row,item) }}
                    </div>
                  </div>
                </div>
                <div
                  :class="{'no-need-number':scope.row.needNumber===2||!scope.row.count}"
                  class="AnswerContent-option-item text-ellipsis answer-other-number"
                  :title="scope.row.numberTitle||''"
                >
                  {{ '+'+ scope.row.count||0 }}
                </div>
              </div>
            </template>
          </el-table-column>

// js
isOverflow(row) {
      let element = document.getElementById(`AnswerContent-option-item-box-${row.ID}`);
      let element1 = document.getElementById(`for-computed-width-box-${row.ID}`);
      if (element && element1) {
        //如果所有标签的长度总和大于外层盒子的长度，则用+N展示放不下的标签数量
        if (element.offsetWidth > element1.offsetWidth) {
          let answerOptions = element.querySelectorAll('.AnswerContent-option-item');
          // 累计计算长度，数量，title
          let widthAdd = 0;
          for (let i = 0; i < answerOptions.length; i++) {
            if (widthAdd + answerOptions[i].offsetWidth > element1.offsetWidth) {
              element1.style.width = widthAdd + 'px';
              this.$set(row, 'count', answerOptions.length - i);
              let numberTitle = [];
              for (let j = answerOptions.length - 1; j >= i; j--) {
                numberTitle.push(answerOptions[j].innerText);
              }
              this.$set(row, 'numberTitle', numberTitle.join(','));
              break;
            }
            widthAdd += answerOptions[i].offsetWidth + 8;
          }
          this.$set(row, 'needNumber', 1);
          return true;
        }
      }
      this.$set(row, 'needNumber', 2);
      return false;
    },
 getAnswerList() {
      let params = {
        FilterString: this.searchkey
      };
      service.getAnswerList(params, {
        success: res=>{
          let {Answers = []} = res;
          Answers.forEach(item=>{
            if (item.Type) {
              item.disabled = true;
            }
          });
          this.tableData = Answers;
          this.$nextTick(()=>{
            this.tableData.forEach(item=>{
              this.isOverflow(item);
            });
          });
        }
      });
    }

  • 11、(20240129) 表格中使用tag形状展示数据，展示不下时展示+N

效果图： image.png 实现：

// html
<el-table-column
            prop="AnswerContent"
            :label="$t('hcp_inspection_options_name')"
            column-key="AnswerContent"
          >
            <template slot-scope="scope">
              <div class="AnswerContent-options-box">
                <div
                  class="for-computed-width-box"
                  :id="`for-computed-width-box-${scope.row.ID}`"
                >
                  <div
                    class="AnswerContent-option-item-box"
                    :id="`AnswerContent-option-item-box-${scope.row.ID}`"
                  >
                    <div
                      v-for="item in scope.row.AnswerContent"
                      :key="item.ID"
                      :title="computedScore(scope.row,item)"
                      class="AnswerContent-option-item text-ellipsis"
                    >
                      {{ computedScore(scope.row,item) }}
                    </div>
                  </div>
                </div>
                <div
                  :class="{'no-need-number':!isOverflow(scope.row)||!scope.row.count}"
                  class="AnswerContent-option-item text-ellipsis answer-other-number"
                  :title="scope.row.numberTitle||''"
                >
                  {{ '+'+ scope.row.count||0 }}
                </div>
              </div>
            </template>
          </el-table-column>
          
// js 
 isOverflow(row) {
      let element = document.getElementById(`AnswerContent-option-item-box-${row.ID}`);
      let element1 = document.getElementById(`for-computed-width-box-${row.ID}`);
      if (element && element1) {
        //如果所有标签的长度总和大于外层盒子的长度，则用+N展示放不下的标签数量
        if (element.offsetWidth > element1.offsetWidth) {
          let answerOptions = element.querySelectorAll('.AnswerContent-option-item');
          // console.log(answerOptions, 'answerOptions');
          // 累计计算长度，数量，title
          let widthAdd = 0;
          for (let i = 0; i < answerOptions.length; i++) {
            if (widthAdd + answerOptions[i].offsetWidth > element1.offsetWidth) {
              element1.style.width = widthAdd + 'px';
              this.$set(row, 'count', answerOptions.length - i);
              let numberTitle = [];
              for (let j = answerOptions.length - 1; j >= i; j--) {
                numberTitle.push(answerOptions[j].innerText);
              }
              this.$set(row, 'numberTitle', numberTitle.join(','));
              break;
            }
            widthAdd += answerOptions[i].offsetWidth + 8;
          }
          return true;
        }
      }
      return false;
    }
    
// css
.for-computed-width-box{
    width: calc(100% - 70px);
    overflow: hidden;
    position: relative;
  }
  .AnswerContent-option-item-box{
    display: flex;
    position: absolute;
    left: 0px;
    top: 0px;
  }
  .AnswerContent-option-item{
    padding: 0 12px;
    height: 24px;
    line-height: 24px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 2px;
    margin-right: 8px;
    max-width: 160px;
    flex-shrink: 0;
  }
  .answer-other-number{
    visibility: visible;
  }
  .no-need-number{
    visibility: hidden;
  }

  • 10、(20240129) JavaScript 获取任意两个元素之间的距离

 checkDistance() {
      let element1 = document.getElementById('inspection-item-left-btns');
      let element2 = document.getElementById('inspection-item-right-content');
      let rect1 = element1.getBoundingClientRect();
      let rect2 = element2.getBoundingClientRect();
      let distanceX = Math.abs(rect2.left - rect1.left - element1.offsetWidth);
      this.setBtnWidth = document.getElementById('h-icon-setting-button')?.offsetWidth || 0;
      if (distanceX <= 64) {
        this.onlyShowIcon = true;
      } else if (distanceX > 64 + this.setBtnWidth) {
        this.onlyShowIcon = false;
      }
    },

参考文档：my.oschina.net/SZQing/blog…

  • 9、(20240129) css中的visibility属性

visibility:hidden 元素是不可见的，但是元素还会占据原有的空间 image.png

  • 8、(20240129) 获取父元素里面的所有子元素

<body>
    <ul class="uls">
        <li><img src="../img/closed.png" />你好</li>
        <li><img src="../img/closed.png" />你好</li>
        <li><img src="../img/closed.png" />你好</li>
    </ul>
</body>
 
<script>
    //先获取
    var imgs = document.querySelector('.uls').querySelectorAll('img');
    //for循环遍历出每个imgs里的li
    for (i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function() {
            console.log(1);
        }
    }
</script>

  • 7、(20240129) 结束for循环

image.png

  • 6、(20240129) window.onresize和window.addEventListener的使用和取消

使用：

window.onresize = function() {myFunction()};
window.addEventListener("resize", myFunction);

取消：

window.onresize = null;
window.removeEventListener("resize", myFunction);

参考文档： www.5axxw.com/questions/s…

  • 5、(20240129) @click的修饰符 stop,prevent,capture,self

    prevent:有些标签属性自带了事件，但我们有时并不需要那些事件，因此就需要阻止默认事件，只执行我们绑定的事件。 stop:点击该元素时，仅执行本身绑定事件；点击该元素内的里元素时，执行到该元素事件为止。 capture:类似于给了事件绑定一个关键字，点击该元素或该元素内的里元素，都会首先执行该元素事件，再从内向外依次冒泡。 self:当元素加上.self修饰符时，冒泡会自动跳过当前元素，但不影响其他元素的冒泡和捕获（但点击该元素时，是会触发事件的）。 参考文档：www.cnblogs.com/emmamayday/…

  • 4、(20240124) form表单validator验证报错must call validateField with valid prop string!

    我这次的遇到的情况其实是对el-form-item使用了v-if加上校验的时机不对导致的，我在watch监听中，监听数据的变化，并对A项进行了校验，但控制A项的v-if数据变化了多次，导致最初的校验生效了，但后期该项又被销毁重新创建，导致了该报错。 参考了该文章的评论： blog.csdn.net/weixin_4693…

image.png

  • 3、(20240117) beforeRouteEnter里面能用this吗 -不能

在beforeRouteEnte中，组件还未被创建，还没有this对象，可以在next()函数里获取this并进行使用

beforeRouteEnter(to, from, next) {
    console.log("to===", to.name) 
    console.log("from.name ===", from.name) 
    console.log("from ===", from)    
    next( vm => {
      if(from.name === 'xxx') {
        // 处理语句，可以是 data 中的数据，也可以是 methods中的函数。vm 相当于 this       
        vm.name = 'xxx' 
        vm.alarm()
      }
    })
  }

参考文档 blog.csdn.net/mm_01234567…

  • 2、（20240106） 跳出某次forEach循环

js中的foreach跳出循环使用return跳出本次循环执行下次循环，使用抛出异常的方式跳出循环体。 参考文档：blog.csdn.net/m0_72167535…

  • （20240106）npm更新依赖包到指定版本

npm install <package-name>@<version> --save

  • 1、（20240106）vue中想在data中访问到this，可以使用回调函数

callbacks3: {
        beforeCheck: (treeId, treeNode)=> {
          if (treeNode.type !== 1001) {
            return false;
          }
          let treeObj3 = this.$refs.ztreeSelect3.treeObj;
          if (treeObj3) {
            let nodes = treeObj3.getCheckedNodes(true);
            if (nodes.length >= 2) {
              return false;
            }
          }
          return true;
        }
      },

参考文档： blog.csdn.net/zly_101/art…

avatar
文章
阅读
粉丝