40 lines
940 B
Vue
40 lines
940 B
Vue
|
<template>
|
|||
|
|
<el-select v-model="innerValue" multiple placeholder="请选择" filterable clearable :allow-create="allowAdd">
|
|||
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|||
|
|
</el-select>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- v-model上床绑定逗号分隔的字符串，可以props配置是否允许新增 -->
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'MutiSelect',
|
|||
|
|
props: {
|
|||
|
|
value: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
options: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => []
|
|||
|
|
},
|
|||
|
|
allowAdd: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 计算属性捕获实现双向绑定
|
|||
|
|
computed: {
|
|||
|
|
innerValue: {
|
|||
|
|
get() {
|
|||
|
|
if (!this.value) {
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
return this.value.split(',');
|
|||
|
|
},
|
|||
|
|
set(val) {
|
|||
|
|
this.$emit('input', val.join(','));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|