<!--
 * @Description : 多选 - 选择框
 * @Author      : jinxin
 * @Date        : 2023-02-20 15:40:54
-->
<template>
    <div class="lc_title_box">
       <el-form>
         <el-form-item :label="label">
            <el-select
                v-model="data.sellist"
                multiple
                @change="changeSelEmit"
                placeholder="请选择"
                style="width: 500px"
                >
                <el-option
                    v-for="item in selvallist"
                    :key="item.label + item.value"
                    :label="item.label"
                    :value="item.value"
                />
                </el-select>
         </el-form-item>
       </el-form>
    </div>
</template>

<script>
import { defineComponent,reactive,watch } from 'vue'
export default defineComponent({
    props:{
        label:String,
        sellist:Array,
        selvallist:Array
    },
    emits:['emitManySelect'],
    setup(props,context){
        let data = reactive({
            sellist:[]
        })
        const changeSelEmit = (vlist) => {
            context.emit('emitManySelect',vlist)
        }
        watch(()=>props.sellist,(v1)=>{
            data.sellist = v1
            console.log('watch ---> ',data.sellist)
        })
        return{
            data,
            props,
            changeSelEmit
        }
    }
})
</script>

<style scoped>
.lc_title_box_title{
    display:flex;
    justify-content:left;
    align-items:center;
}
.lc_title_box_title span:nth-child(1){
    height:12px;
    margin-right:8px;
}

.checkbox_group{
    margin:16px 0;
}
.checkbox_group span{
    margin-right: 16px;
}
</style>