vue-select使用范例
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>
更多推荐
已为社区贡献17条内容
所有评论(0)