selectpicker 与vue整合

2022-10-13 106

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： selectpicker 与vue整合

个人实践关键代码:

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>

$(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;
            }
        })