73 lines
1.3 KiB
Vue
73 lines
1.3 KiB
Vue
<!--
|
|
* @Descripttion: 多选框组件
|
|
* @Author: 龙运模
|
|
* @Date: 2024年07月11日
|
|
* @LastEditors: 龙运模
|
|
* @LastEditTime:
|
|
-->
|
|
|
|
<template>
|
|
<div class="scSelect">
|
|
<el-select v-bind="$attrs" v-model="localData" class="input" :size="size" @visible-change="getDataList" @change="selectChange" :placeholder="placeholder" clearable>
|
|
<slot></slot>
|
|
</el-select>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "index",
|
|
props:{
|
|
activation_select: {
|
|
type: Object,
|
|
default: () => ({ operator: "in", value: [] })
|
|
},
|
|
size:{ type: String, default: "small" },
|
|
placeholder:{type:String, default:"请选择"},
|
|
},
|
|
watch:{
|
|
activation_select:{
|
|
handler(val){
|
|
if(!val || val.value.length == 0){
|
|
this.localData = [];
|
|
}
|
|
},
|
|
deep:true
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
localData:[],
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods:{
|
|
getDataList(val){
|
|
this.$emit('fetchData',val);
|
|
},
|
|
selectChange(e){
|
|
this.localData = e;
|
|
this.emitActivationSelect();
|
|
},
|
|
emitActivationSelect() {
|
|
this.$emit('update:activation_select', {
|
|
operator: this.activation_select.operator,
|
|
value: this.localData? this.localData:[]
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.scSelect{
|
|
width: 100%;
|
|
height: 100%;
|
|
:deep(.el-input){
|
|
height: 28px;
|
|
}
|
|
}
|
|
</style>
|