You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.7 KiB
47 lines
1.7 KiB
<template>
|
|
<div>
|
|
<select class="col-xs-10 col-sm-5 MultiSelectList" multiple ref="select" :name="currentName" v-model="currentValue">
|
|
<template v-for="(item,index) in list">
|
|
<option :value="item.value" :data-section="item.group?item.group.name:''" :data-index="index" selected v-if="item.selected">{{item.text}}</option>
|
|
<option :value="item.value" :data-section="item.group?item.group.name:''" :data-index="index" v-else>{{item.text}}</option>
|
|
</template>
|
|
</select>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['prefix', 'name', 'value', 'data'],
|
|
data: function () {
|
|
return {
|
|
currentName: this.prefix ? (this.prefix + '.' + this.name) : this.name,
|
|
currentValue: this.value
|
|
};
|
|
},
|
|
watch: {
|
|
currentValue(val) {
|
|
this.$emit('update:value', val);
|
|
this.$emit('change', this.name);
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.$nextTick(function () {
|
|
$(this.$refs.select).treeMultiselect({
|
|
enableSelectAll: true,
|
|
searchable: true,
|
|
selectAllText: "全选",
|
|
unselectAllText: "反选"
|
|
});
|
|
var vm = this;
|
|
$(this.$refs.select).change(function () {
|
|
vm.$emit('update:value', $(this).val());
|
|
vm.$emit('change', vm.name);
|
|
});
|
|
});
|
|
},
|
|
computed: {
|
|
list: function () {
|
|
return this.data[this.name + 'SelectList'];
|
|
}
|
|
}
|
|
};
|
|
</script> |