exam-score-statistic-web/src/components/StateSelect.vue

<template>
  <a-select
    placeholder="状态"
    allowClear
    :disabled="props.disabled"
    :value="valueStr"
    @change="handleChange"
    style="width: 80px"
  >
    <a-select-option value="true">启用</a-select-option>
    <a-select-option value="false">禁止</a-select-option>
  </a-select>
</template>

<script setup lang="ts">
import { computed } from "vue-demi";

const props = withDefaults(
  defineProps<{
    value?: boolean;
    disabled?: boolean;
  }>(),
  {
    value: undefined,
    disabled: false,
  }
);
const emit = defineEmits(["update:value"]);

const valueStr = computed(() => {
  let res: undefined | boolean | string = props.value ?? undefined;
  if (typeof res === "boolean") res = props.value + "";
  return res as undefined | string;
});

function handleChange(v: undefined | string) {
  // console.log(v);
  emit("update:value", typeof v === "undefined" ? v : JSON.parse(v));
}
</script>