bootstrap以及bootstrap模糊搜索多選下拉框安裝及使用

bootstrap

1、bootstrap安裝

npm install bootstrap

2、在main.js進行導入就可以了

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/js/bootstrap.min'

bootstrao模糊搜索多選框

1、安裝

npm install bootstrap-select

2、定義渲染區域

<select v-model="passUserId" class="form-control form-control-sm selectpicker" multiple data-live-search="true" id="passUser" data-size="6" >
</select>

定義內容說明看下面

3、進行渲染

oaEmpList：渲染的數據列表來源

$('#passUser').empty()
let option = ''
option += "<option value=''>" + '請選擇' + '</option>'
this.oaEmpList.forEach(el => {
  option += "<option value='" + el.recordId + "'>" + el.name + '</option>'
})
$('#passUser').append(option)
$('#passUser').selectpicker('val', this.passUserId)
$('#passUser').selectpicker('render')
$('#passUser').selectpicker('refresh')
$('#passUser').selectpicker()

放官網文檔，裏面有該插件提供的方法和屬性

http://developer.snapappointments.com/bootstrap-select/