HTML

Question

我希望有一个侧边栏代表过滤器，并且在其中有一个复选框代表应该向用户显示的内容。我发现了这个：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

现在，我希望从链接中获得类似文档中的示例，但这要更深一层。

Answer 1

基本上，我创建了三批三态分组（每组三态+3个选择），然后在顶部创建了另一个三态复选框，该复选框根据每个选择中的选择数量更改其状态三个分组。

Answer 2

将其应用于Bootstrap Vue应该很简单，因为Bootstrap Vue仅抽象HTML。我刚刚添加了第一个过滤器，您应该明白了。

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>

JavaScript

您可以在'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
    }
  }
})

CSS

.indent {
  margin-left: 1em;
}

.double-indent {
  margin-left: 2em;
}

预览：http://jsfiddle.net/xv3y04j2/

Vue-bootstrap嵌套复选框

2 个答案:

HTML

JavaScript

CSS