vue计算动态元素宽度

标签：tick   宽度   列表   一个   动态   style   div   The   结果   

问题描述

需求要一个列表，列表中所有元素不能换行，每一个元素包括一个table。

分析问题

可以使用一个ul然后让li浮动，这样的结果是当li过长会换行，为了不让li换行可以动态计算所有长度之和作为ul的长度

问题解决

<div class="father">  
    <ul class="clearfix" ref="ulRef" :style="{ width: ulWidth }">
       <template v-for="un in uList">
          <un-li :key="un.id"></un-li>
       </template>
    </ul>
</div>

initWidth() {
      this.$nextTick(() => {
        let len = this.$refs.ulRef.children.length
        let allWidth = len
        while(--len > -1) {
          let liWidth = this.$refs.ulRef.children[len].offsetWidth
          allWidth += liWidth
        }
        this.ulWidth = allWidth + ‘px‘
      })
}

vue计算动态元素宽度

标签：tick   宽度   列表   一个   动态   style   div   The   结果   

原文地址：https://www.cnblogs.com/codebook/p/14384635.html