vue.js 如何在html列表中使用v-if过滤tid.length

mum43rcc  于 2022-11-17  发布在  Vue.js
关注(0)|答案(2)|浏览(130)

我怎么能只让tid长度7在级别和tid长度10去显示在级别。我试图使用v-if来使作为过滤器,但只显示级别,但级别不显示。
潮汐

当前问题

树列表

我要找的是

https://ibb.co/GdPf8yd
示例:级别1 8000001,因此下面的级别将为8000001000, 8000001001, 8000001002, 8000001003, 8000001004

<template>
  <div class="css-treeview">
    <template v-for="item in treelist" :key="item">
      <ul>
        <li v-if="item.t.length == 7"><input type="checkbox" id="item-0" /><label for="item-0">{{ item.mAcName }} ---
            {{ item.mName }}</label>
          <ul>
            <li v-if="item.t.length == 10"><input type="checkbox" id="item-0-0" /><label for="item-0-0">{{ item.mAcName }}
                --- {{ item.mName }}</label>
            </li>
          </ul>
        </li>
      </ul>
    </template>
  </div>
</template>
5vf7fwbs

5vf7fwbs1#

此条件始终返回“false”,因为类型“7”和“10”中没有重叠。
你应该这样做。

<template>
  <div class="css-treeview">
    <template v-for="item in treelist" :key="item">
      <ul>
        <li v-if="item.t.length === 7">
          <input type="checkbox" id="item-0" /><label for="item-0">{{ item.mAcName }} --- {{ item.mName }}</label>
          <ul>
            <template v-for="item2 in treelist" :key="item2">
              <li v-if="item2.t.length === 10">
                <input type="checkbox" id="item-0-0" />
                <label for="item-0-0">{{ item2.mAcName }} --- {{ item2.mName }}</label>
              </li>
            </template>
          </ul>
        </li>
      </ul>
    </template>
  </div>
</template>
ycggw6v2

ycggw6v22#

如@O-h-y-0答案中所述,您的代码的问题是“if”子句重叠。
检查长度为10的“if”子句将永远不会执行,因为它被一个限制长度为7的“if”子句 Package 。但他的答案的问题是,第二个循环将在每个父循环中执行,因此它将显示为重复的。
我的建议是创建一个计算变量,在其中将长度为7的项重组为父项,将长度为10的项移动为子项。

<template>
  <div>
    <ul>
      <li v-for="item in treeGrouped">
        {{item.value}}
        <ul>
          <li v-for="child in item.children">
            {{child}}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        treelist: [
          'aaaaabb',
          'aaaaabbbbb',
          'aaaaabb',
          'aaaaabbbbb',
          'aaaaabbbbb',
          'aaaaabb',
          'aaaaabb',
          'aaaaabbbbb',
          'aaaaabbbbb',
          'aaaaabbbbb',
          'aaaaabb',
        ]
      }
    },
    computed: {
      treeGrouped() {
        const result = []
        this.treelist.forEach((item)=>{
          if (item.length === 7) {
            result.push({
              value: item,
              children: [], 
            })
          } else if (item.length === 10) {
            if (result.length) {
              result[result.length-1].children.push(item)
            }
          }
        })
        return result;
      }
    }
  }
</script>

这种计算逻辑只适用于我制作的简单数据,因为它太长了,无法复制您的数据,因为您只提供了示例数据作为图像。但如果您理解我的意思,我敢肯定您可以根据需要改进它。
编辑:作为参考,计算上的那些逻辑会给予你类似这样的结果。

[
  {
    "value": "aaaaabb",
    "children": [
      "aaaaabbbbb"
    ]
  },
  {
    "value": "aaaaabb",
    "children": [
      "aaaaabbbbb",
      "aaaaabbbbb"
    ]
  },
  {
    "value": "aaaaabb",
    "children": []
  },
  {
    "value": "aaaaabb",
    "children": [
      "aaaaabbbbb",
      "aaaaabbbbb",
      "aaaaabbbbb"
    ]
  },
  {
    "value": "aaaaabb",
    "children": []
  }
]

相关问题