使用自定义树类型列表创建固定侧边栏的最佳方式是什么？

Question

我正在尝试创建下面的侧边栏。然而，它似乎不能正确渲染，因为我在展开时有很多闪烁。我使用b-nav而不是侧边栏，因为我有一个水平导航和侧边栏似乎覆盖了水平:以下是我的代码和图片：

一定有更好、更简单的方法来做到这一点。我已经搜索过了，没有看到任何与我的问题相关的东西。

​

​

​

new Vue({
  el: '#app',
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <template>
    <div>
        <b-row>
            <b-col>
            </b-col>
            <b-col cols="3" class="bg-light border-left">
               <div>
  <b-nav v-b-toggle.collapse-1 ><h4 class="mb-2">Directory of Employee</h4></b-nav>
  <!-----Payroll Frequency---->
  <b-collapse id="collapse-1" class="mt-1">
             <b-nav v-b-toggle.collapse-1-inner size="sm">
      <b-form-checkbox
      id="checkbox-1"
      v-model="status"
      name="checkbox-1"
      value="accepted"
      unchecked-value="not_accepted"
    >    </b-form-checkbox>
                 Monthly</b-nav>
             <!-----Position---->
            <b-collapse id="collapse-1-inner" class="mt-1 ml-3">
                <b-nav class="ml-6" v-b-toggle.collapse-2-inner size="sm">
      <b-form-checkbox
      id="checkbox-2"
      v-model="status"
      name="checkbox-2"
      value="accepted"
      unchecked-value="not_accepted"
    >    </b-form-checkbox>
                    Position</b-nav>
                         <!-----Employee---->
                    <b-collapse id="collapse-2-inner" class="mt-1 ml-5">
                                              <b-nav>
      <b-form-checkbox
      id="checkbox-7"
      v-model="status"
      name="checkbox-7"
      value="accepted"
      unchecked-value="not_accepted">
      <feather-icon size="1x" icon="UserCheckIcon" />Employee Manager
         </b-form-checkbox>
         </b-nav>
                    </b-collapse>
            </b-collapse>
            <!-----Payroll Frequency2---->
            <b-nav v-b-toggle.collapse-3-inner size="sm">
      <b-form-checkbox
      id="checkbox-3"
      v-model="status"
      name="checkbox-3"
      value="accepted"
      unchecked-value="not_accepted"
    >    </b-form-checkbox>
                Fortnightly</b-nav>
             <!-----Position---->
            <b-collapse id="collapse-3-inner" class="mt-1 ml-3">
                <b-nav class="ml-6" v-b-toggle.collapse-4-inner size="sm">
        <b-form-checkbox
      id="checkbox-4"
      v-model="status"
      name="checkbox-4"
      value="accepted"
      unchecked-value="not_accepted"
    >    </b-form-checkbox>
                    Position</b-nav>
                         <!-----Employee---->
                    <b-collapse id="collapse-4-inner" class="mt-1 ml-5">
                        <b-nav>
      <b-form-checkbox
      id="checkbox-5"
      v-model="status"
      name="checkbox-5"
      value="accepted"
      unchecked-value="not_accepted">
      <feather-icon size="1x" icon="UserCheckIcon" />Employee
         </b-form-checkbox>
         </b-nav>
                                 <b-nav>
      <b-form-checkbox
      id="checkbox-6"
      v-model="status"
      name="checkbox-6"
      value="accepted"
      unchecked-value="not_accepted">
      <feather-icon size="1x" icon="UserCheckIcon" />Employee2
         </b-form-checkbox>
         </b-nav>
                    </b-collapse>
            </b-collapse>
  </b-collapse>
</div>
            </b-col>
        </b-row>
    </div>
</template>
</div>

​

Answer 1

我找到了一个可以安装的引导模块。

现在就试一试，看看它是否工作得很好。

https://github.com/kamil-lip/bootstrap-vue-treeview#readme