antdv select 选择器设置 lableInValue属性，获取选项文本，添加表单验证报错

背景

实现一个下拉框，接口返回select 的option , 包含value和id,比如 [{value:'选项一',id: '1'}] ,前端需要显示的是value,调接口传参的时候需要传id,并且需要添加表单验证。

lable-in-value 属性

默认情况下 select 的onChange 里只能拿到 value，如果需要拿到选中的节点文本 label，可以使用 labelInValue 属性。 选中项的 label 会被包装到 value 中传递给 onChange 等函数，此时 value 是一个对象。

<template>
  <a-select
    v-model:value="value"
    label-in-value

    :options="options"
    @change="handleChange"
  >
  </a-select>
</template>
<script lang="ts">
import { SelectTypes } from 'ant-design-vue/es/select';
import { defineComponent, ref } from 'vue';

interface Value {
  value?: string;
  label?: string;
}

export default defineComponent({
  setup() {
    const options = ref<SelectTypes['options']>([
      {
        value: '1',
        label: '选项一',
      },
      {
        value: '2',
        label: '选项二',
      },
    ]);
    const handleChange = (value: Value) => {
      console.log(value); // { key: "1", label: "选项一" }
    };
    return {
      value: ref<Value>({ value: '1' }),
      options,
      handleChange,
    };
  },
});
</script>

添加表单验证

如果只设置

const rules = {
    name: [{ required: true, message: '请选择name', trigger: 'blur' }],
};

会报类型错误，因为select设置labelInValue 属性后，选中项的 label 会被包装到 value 中传递给 onChange 等函数，此时 value 是一个对象。

所以需要自定义校验规则

<template>
    <a-form
        ref = "formRef"
        : model = "formState"
        : rules = "rules"
    >
        <a-form - item label = "姓名" name = "name" >
            <a-select
                v - model: value = "formState.name"
                label -in -value
                : options = "options"
                @change="handleChange"
            >
            </a-select>
        < /a-form-item>
    < /a-form>
< /template>
< script lang = "ts" >
import { RuleObject, ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { defineComponent, reactive, ref, UnwrapRef } from 'vue';
import { SelectTypes } from 'ant-design-vue/es/select';
interface FormState {
    name: string;
}
export default defineComponent({
    setup() {
        const formRef = ref();
        const formState: UnwrapRef<FormState> = reactive({
            name: '',
        });

        const options = ref<SelectTypes['options']>([
            {
                value: '1',
                label: '选项一',
            },
            {
                value: '2',
                label: '选项二',
            },
        ]);
        const handleChange = (value: Value) => {
            console.log(value); // { key: "1", label: "选项一" }
        };

        const validateName = (rule: RuleObject, value: string) => {
            if (!value) {
                return Promise.reject('请选择姓名');
            } else {
                return Promise.resolve();
            }
        };

        const rules = {
            pass: [{ required: true, validator: validateName, trigger: 'blur' }],
        };

        return {
            formState,
            formRef,
            rules,
            options,
            handleChange,
        };
    },
});
</script>

总结

• 当select显示的内容和需要传给后端的内容不一致时： 可以设置lableInValue属性，此时，选中项的 label 会被包装到 value 中传递给 onChange 等函数，此时 value 是一个对象。

• 当需要添加表单验证的时候，需要自定义表单验证