Vue-bootstrap嵌套复选框

时间:2018-09-21 15:10:15

标签: vue.js bootstrap-4

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

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

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

将其应用于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/