勾选前沿：[antdv select 设置 lableInValue 属性，获取选项文本，轻松添加表单验证报错]

前端

2024-02-17 23:56:40

Ant Design Vue 中的 Select 组件

Ant Design Vue 的 Select 组件是一个强大的数据选择工具，允许用户从一组选项中选择一个或多个值。它提供了丰富的功能，包括可搜索、可过滤、可禁用等，可以满足各种各样的表单需求。

设置 lableInValue 属性

当 select 显示的内容和需要传给后端的内容不一致时，您可以设置 lableInValue 属性。此时，选中项的 label 会被包装到 value 中传递给 onChange 等函数，您可以通过此属性来获取选项文本。

添加表单验证报错

Ant Design Vue 提供了内置的表单验证功能，您可以轻松地为 select 组件添加表单验证报错。只需在 select 组件中设置 rules 属性，并指定验证规则即可。

示例代码

<template>
  <a-form :model="form" layout="vertical">
    <a-form-item label="Select" :rules="[{ required: true, message: 'Please select an option' }]">
      <a-select v-model="value" :label-in-value="true">
        <a-option :value="1">Option 1</a-option>
        <a-option :value="2">Option 2</a-option>
        <a-option :value="3">Option 3</a-option>
      </a-select>
    </a-form-item>
    <a-button type="primary" @click="submitForm">Submit</a-button>
  </a-form>
</template>

<script>
import { ref } from 'vue';
import { Form, FormItem, Select, Option, Button } from 'ant-design-vue';

export default {
  components: {
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    [Select.name]: Select,
    [Option.name]: Option,
    [Button.name]: Button,
  },
  setup() {
    const form = ref({});
    const value = ref(null);

    const submitForm = () => {
      form.value.validateFields().then(() => {
        console.log('Success!');
      }).catch((errorInfo) => {
        console.log('Error: ', errorInfo);
      });
    };

    return {
      form,
      value,
      submitForm,
    };
  },
};
</script>