bootstrapVue踩坑

radio返回数字类型

• value前需要有“：”，且后面也是需要带引号的
• :value=1 好像也是有问题的
• 使用——:value="1"来实现

<b-form-radio-group v-model="name">
  <b-form-radio
    name="name_radio"
    :value="1"
  ></b-form-radio>
  <b-form-radio
    name="name_radio"
    :value="2"
  ></b-form-radio>
</b-form-radio-group>

Element-ui Radio单选框中label绑定数据类型问题

多选checkbox无法选中

• 使用官方样例可以正常选择

<b-form-group label="Using options array:" v-slot="{ ariaDescribedby }">
      <b-form-checkbox-group
        id="checkbox-group-1"
        v-model="selected"
        :options="options"
        :aria-describedby="ariaDescribedby"
        name="flavour-1"
      ></b-form-checkbox-group>
    </b-form-group>

• 但是将v-model改成自己的就无法选中了，最后删除了id name可以正常使用。

浏览器下载zip文件

• 前端：直接调用下载的接口即可。

<a href="/service/export/export_log/system_log">导出</a>

• 发送时需要注意

折叠面板

• 以下使用了h2作为tab
• v-b-toggle用于绑定b-collapse，如果不绑定，点击不会展开和回收。
• 给collapse绑定v-model，并将对应值设为true，可使tab默认展开。
• collapse中添加accordion="my-accordion"可实现手风琴效果。
• role=“tabpanel”

 <b-row class="my-table">
   <h2 role="tab" v-b-toggle.math>数学</h2>
   <b-collapse
     v-model="is_math"
     id="math"
     style="width:100%;" >
     <b-table-simple 
     		hover
          caption-top
          responsive>
     <b-tbody>
            <b-tr>
              <b-th class="text-left">科目</b-th>
              <b-td class="text-left">
                <b-form-input/>
              </b-td>
            </b-tr>
          </b-tbody>
     </b-table-simple>
   </b-collapse>
 </b-row>

• 直接使用visible即可设置初始可见。
  折叠面板(Collapse)

<div>
  <b-button v-b-toggle.collapse-3 class="m-1">Toggle Collapse</b-button>
  <b-collapse visible id="collapse-3">
    <b-card>I should start open!</b-card>
  </b-collapse>
</div>

使用textarea持续接收消息并保持在最下面

直接搜到的办法试过，但是修改失败了。
因此我在传数据过来的时候，监控数据的变化，在watch中添加了修改scrollTop
以下代码中需要通过ref进行后续操作

          <b-form-textarea
            ref="textarea"
            rows="8"
            disabled
            v-model="messages">
          </b-form-textarea>

vue部分：
其中this.$refs.textarea.$el.scrollHeight是最大高度，this.$refs.textarea.$el.scrollTop是调整显示的。

  watch:{
    messages: {
      handler() {
        this.$refs.textarea.$el.scrollTop = this.$refs.textarea.$el.scrollHeight
      }
    }
  },

参考：Vue input textarea自动滚动到最底部