我怎么能只让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>
2条答案
按热度按时间5vf7fwbs1#
此条件始终返回“false”,因为类型“7”和“10”中没有重叠。
你应该这样做。
ycggw6v22#
如@O-h-y-0答案中所述,您的代码的问题是“if”子句重叠。
检查长度为10的“if”子句将永远不会执行,因为它被一个限制长度为7的“if”子句 Package 。但他的答案的问题是,第二个循环将在每个父循环中执行,因此它将显示为重复的。
我的建议是创建一个计算变量,在其中将长度为7的项重组为父项,将长度为10的项移动为子项。
这种计算逻辑只适用于我制作的简单数据,因为它太长了,无法复制您的数据,因为您只提供了示例数据作为图像。但如果您理解我的意思,我敢肯定您可以根据需要改进它。
编辑:作为参考,计算上的那些逻辑会给予你类似这样的结果。