55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<template>
|
|
<div class="form-item-box" :style="{ width: width }">
|
|
<el-checkbox-group :model-value="localValue" @change="handleCheckAllChange">
|
|
<el-checkbox
|
|
v-for="item in checkList"
|
|
:key="item.value"
|
|
:label="item.value"
|
|
>{{ item.label }}</el-checkbox
|
|
>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { COMPONENT_WIDTH } from "@/constant";
|
|
import { ref, defineProps, defineEmits, defineExpose, watch } from "vue";
|
|
const props = defineProps({
|
|
//获取组件传值
|
|
placeholder: {
|
|
default: "请填写手机号",
|
|
type: String
|
|
},
|
|
modelValue: {
|
|
default: [],
|
|
type: Array
|
|
},
|
|
width: {
|
|
default: COMPONENT_WIDTH,
|
|
type: String
|
|
},
|
|
// 绑定的prop
|
|
checkList: {
|
|
default: "",
|
|
type: String
|
|
}
|
|
});
|
|
|
|
const localValue = ref(props.modelValue);
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(val) => {
|
|
localValue.value = val;
|
|
console.log(val, "val");
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
const emits = defineEmits(["update:modelValue"]);
|
|
const handleCheckAllChange = (e) => {
|
|
localValue.value = e;
|
|
emits("update:modelValue", e);
|
|
};
|
|
</script>
|