vue-select使用范例

废话少说，上代码

<template>
  <div class="main-content">
    <button @click="addModel">新增 (多选) |</button>
    <br>
    <br>
    <button @click="editModel">编辑 （多选）</button>
    <br>
    <br>

    <button @click="addSingleModel">新增 (单选) |</button>
    <br>
    <br>
    <button @click="editSingleModel">编辑 （单选）</button>
    <br>
    <br>

    <!-- 新增-编辑 Modal -开始 -->
    <div class="modal fade" id="add_edit_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">1234 </h4>
          </div>
          <div class="modal-body">
            <form class="navbar-form">
              <div class="form-group">
                <label class="col-md-3 label-name">所属区域:</label>
                <v-select class="col-md-9 v-selectss model-input" v-model="ip" label="name"
                          multiple  :options="options"></v-select>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button @click="saveMul(isAdd)" type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增-编辑 Modal -结束 -->


    <!-- 新增-编辑 Modal -开始 -->
    <div class="modal fade" id="single_add_edit_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">1234 </h4>
          </div>
          <div class="modal-body">
            <form class="navbar-form">
              <div class="form-group">
                <label class="col-md-3 label-name">所属区域:</label>
                <v-select class="col-md-9 v-selectss model-input" v-model="single" label="name"
                          :options="options"></v-select>

              </div>

            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button @click="saveSingle(isAdd)" type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增-编辑 Modal -结束 -->

  </div>

</template>
<script>
  import $ from 'jquery'
  import urlCenter from '../common/urlCenter'
  export default {
    data() {
      return {
        isAdd: true,
        ip: [],
        options: [],

        single: null
      }
    },
    methods: {
      addModel () {
        this.isAdd = true
        this.getRegion()
        this.ip = []
        $('#add_edit_Modal').modal('show')
      },
      editModel () {
        this.isAdd = false
        this.getRegion()
        this.ip = [{
          'name':'1234',
          'id':'1'
        }]
        $('#add_edit_Modal').modal('show')
      },
      saveMul () {
        console.log(this.ip)
      },
      getRegion () {
        this.httpRequest({
          method: 'GET',
          url: urlCenter.manage.zone.region_manage.CRUD
        }).then(response => {
          if (response.status < 400) {
            this.options = response.data.data
          }
        })
      },
      addSingleModel () {
        this.isAdd = true
        this.getRegion()
        this.single = null
        $('#single_add_edit_Modal').modal('show')
      },
      editSingleModel () {
        this.isAdd = false
        this.getRegion()
        this.single = {name: 'qqq', id: 123}
        $('#single_add_edit_Modal').modal('show')
      },
      saveSingle () {
        console.log(this.single)
      }
    },
    components: {
    }
  }
</script>