文章目录
转载文章:
bootstrap-select多选框与Vue整合
https://blog.csdn.net/z_tankeer/article/details/90374992
个人实践关键代码:
- html
<div class="form-group">
<div class="col-sm-2 control-label">推荐人id</div>
<div class="col-sm-10">
<select class="tagSelect" data-live-search ="true" title="请选择" v-model="recomEvaluation.recommenderId" >
<option v-for="item in recommenderItems" :value="item.id">
{
{ item.name }}
</option>
</select>
</div>
</div>
- js
$(function () {
$(".form_date").datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
format: "yyyy-mm-dd"
});
$(".form_datetime").datetimepicker({
language: 'zh-CN',
// weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 0,
maxView: 4,
forceParse: 0,
format: "yyyy-mm-dd hh:ii:ss"
});
$(".tagSelect").selectpicker();
});
var vm = new Vue({
el: '#rrapp',
data: {
showList: true,
title: null,
recomEvaluation: {
},
recommenderItems: [
]
},
//监听部分
watch: {
/**
* 监听后端的返回结果集
*/
recommenderItems:function () {
this.$nextTick(function () {
$('.tagSelect').selectpicker('refresh');
})
},
saveOrUpdate: function (event) {
console.log(vm.recomEvaluation);
return;
}
})
- 看下效果:
点击确定:
看下控制台:
切换选项:
看下控制台:
总结:
1:selectpicker选择理由:比select2稍微好看点
2:select的显示动态数据需要watch数据集,不然会出现数据空白
完