我希望有一个侧边栏代表过滤器,并且在其中有一个复选框代表应该向用户显示的内容。我发现了这个:https://bootstrap-vue.js.org/docs/components/form-checkbox/#indeterminate-tri-state-support
但是,这只深入了一个层次,我需要去两个层次。我正在尝试实现的示例:
Select All
-Breakfest
-Eggs
-Bacon
-Sandwich
-Lunch
-Salad
-Chicken
-Fish
-Dinner
-Pancakes
-Tacos
-Beef
现在,我希望从链接中获得类似文档中的示例,但这要更深一层。
答案 0 :(得分:1)
基本上,我创建了三批三态分组(每组三态+3个选择),然后在顶部创建了另一个三态复选框,该复选框根据每个选择中的选择数量更改其状态三个分组。
答案 1 :(得分:0)
将其应用于Bootstrap Vue应该很简单,因为Bootstrap Vue仅抽象HTML。我刚刚添加了第一个过滤器,您应该明白了。
<script src="https://unpkg.com/vue"></script>
<div id="app">
<input type="checkbox" v-model="all">Select all<br>
<input type="checkbox" v-model="filters.breakfast.breakfast" class="indent">Breakfast<br>
<input type="checkbox" v-model="filters.breakfast.eggs" class="double-indent">Eggs<br>
<hr>
All: {{ all }}<br>
Breakfast: {{ filters.breakfast.breakfast }}<br>
Eggs: {{ filters.breakfast.eggs }}<br>
</div>
您可以在'filters.breakfast.breakfast' ()
使用循环。我会为此使用Lodash,因为这些属性必须是未知的。
new Vue({
el: '#app',
data: () => ({
all: false,
filters: {
breakfast: {
breakfast: false,
eggs: false
}
}
}),
watch: {
all () {
this.filters.breakfast.breakfast = !this.filters.breakfast.breakfast
},
'filters.breakfast.breakfast' () {
this.filters.breakfast.eggs = !this.filters.breakfast.eggs
}
}
})
.indent {
margin-left: 1em;
}
.double-indent {
margin-left: 2em;
}