求助帖-vue操作虚拟dom获取不到宽度

今天老板有个需求，标签内容并行，超出宽度的拆分截取在下一行和下一个内容并行展示

原项目截图一开始我用css发现因为元素块问题无法用css实现该功能，后面采取用js来实现，自己新建个html来试试看

发现可行

```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallel Flow Layout</title>
<style>
  .container {
    width: 100%;
    position: relative;
    background-color: burlywood;
  }
  .item {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    margin: 5px;
    background-color: lightblue;
    border: 1px solid blue;
  }
</style>
</head>
<body>
<div class="container" id="container">
  <div class="item" style="width: 30%;">A (30%)</div>
  <div class="item" style="width: 80%;">B (80%)</div>
  <div class="item" style="width: 50%;">C (50%)</div>
  <div class="item" style="width: 70%;">D (70%)</div>
  <div class="item" style="width: 60%;">E (60%)</div>
</div>

<script>
  function parallelFlowLayout(container) {
    const items = Array.from(container.querySelectorAll('.item'));
    console.log(items);
    let currentRowTop = 0;
    let currentRowWidth = 0;
    let containerWidth = container.clientWidth;

    items.forEach((item) => {
      let itemWidth = (containerWidth * parseFloat(item.style.width)) / 100;
      if (currentRowWidth + itemWidth <= containerWidth) {
        // 是当前行
        item.style.position = 'absolute';
        item.style.top = `${currentRowTop}px`;
        item.style.left = `${currentRowWidth}px`;
        currentRowWidth += itemWidth;
      } else {
        // 超出的内容不是当前行
        let spaceLeft = containerWidth - currentRowWidth;
        if (spaceLeft > 0 && spaceLeft < itemWidth) {
          // 拆分超出的item
          let clone = item.cloneNode(true);
          clone.style.width = `${(spaceLeft / containerWidth) * 100}%`;
          clone.style.position = 'absolute';
          clone.style.top = `${currentRowTop}px`;
          clone.style.left = `${currentRowWidth}px`;
          container.appendChild(clone);
          item.style.width = `${((itemWidth - spaceLeft) / containerWidth) * 100}%`;
        }
        // 移到下一行
        currentRowTop += item.offsetHeight + 10; // 加10px margin
        currentRowWidth = 0;
        item.style.position = 'absolute';
        item.style.top = `${currentRowTop}px`;
        item.style.left = `${currentRowWidth}px`;
        currentRowWidth += itemWidth - spaceLeft;
      }
    });
  }

  window.addEventListener('load', () => parallelFlowLayout(document.getElementById('container')));
  window.addEventListener('resize', () => parallelFlowLayout(document.getElementById('container')));
</script>
</body>
</html>
但是在vue发现行不通
<view v-if="state.producContentList_wait.length != 0">
              <el-tag type="danger">待匹配标签的内容</el-tag>

              <view v-if="state.producContentList_wait.length != 0" style="
                 
                ">
                <view class="tag-item" v-for="(item, index) in state.producContentList_wait" :key="index">
                  <!--  @tap="
                navigateTo(
                  `/pages/index/tagSearch?item=${JSON.stringify(
                    item
                  )}&type=edit`
                ) " -->
                <el-button @tap="onRuleTagWait(item, index)" style="
                      position: relative;
                      font-size: 12px;
                      color: black;
                      padding: 6px;
                      border: none;
                      line-height: 20px;
                    " color="#f5f5f5">
  {{
    truncateText(item.dictName + "为" + formatTagText(item) + item.unit)
  }}

  <!-- 删除标签 -->
  <el-icon @tap.stop="onTapCloseWait(item)" style="
      position: absolute;
      top: 0%;
      right: -2.8px; /* 保持与按钮右侧内边距一致 */
      transform: translateY(-50%); /* 垂直居中 */
      color: red;
    ">
    <CircleCloseFilled />
  </el-icon>
</el-button>

                </view>
              </view>
            </view>  
            一开始是不能用forEach遍历，改了下用for循环，
            改完之后发现获取不到每个item的宽度（ let itemWidth = (containerWidth * parseFloat(item.style.width)) / 100;），不是NaN就是""。
            有没有哥们求解