Vue.js el-select 自动清空选项教程

在这个教程中，我们将展示如何在 Vue.js 中使用 Element UI 的 el-select 组件，并确保在组件创建完成后自动清空选择框的选项。

创建 Vue 组件

创建一个 Vue 组件，并使用 el-select 组件。我们将在 mounted 生命周期钩子中自动清空选择框的选项。

<template>
  <!-- 表单项，用于选择收款单位账号（个人） -->
  <el-form-item label="收款单位账号（个人）" prop="bankAccountNumber" key="bankAccountNumber">
    <!-- 可清空的选择框 -->
    <el-select
      v-model="form.payment.bankAccountNumber"  <!-- 双向绑定选择框的值 -->
      @change="setCustomerName"                <!-- 当选择改变时，调用 setCustomerName 方法 -->
      clearable                               <!-- 允许清空选择框 -->
      ref="bankAccountSelect"                 <!-- 通过 ref 引用选择框，方便在方法中访问 -->
    >
      <!-- 循环渲染选项 -->
      <el-option
        v-for="item in pays"                 <!-- 遍历 pays 数组 -->
        :key="item.payOpenBankNo"            <!-- 每个选项的唯一键 -->
        :label="item.payOpenBankNo"          <!-- 选项显示的文本 -->
        :value="item.payOpenBankNo"          <!-- 选项的值 -->
      >
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  data() {
    return {
      form: {
        payment: {
          bankAccountNumber: '',            <!-- 选择框绑定的初始值 -->
        },
      },
      pays: [
        { payOpenBankNo: '123456' },        <!-- 示例选项数据 -->
        { payOpenBankNo: '654321' },
      ],
    };
  },
  methods: {
    setCustomerName(value) {
      console.log('Selected value:', value);  <!-- 处理选择改变时的逻辑 -->
    },
    clearSelection() {
      this.form.payment.bankAccountNumber = '';  <!-- 清空选择框绑定的值 -->
      this.$nextTick(() => {                     <!-- 在 DOM 更新后执行清空操作 -->
        if (this.$refs.bankAccountSelect) {
          this.$refs.bankAccountSelect.clear();  <!-- 调用选择框的 clear 方法清空选择 -->
        }
      });
    },
  },
  mounted() {
    this.clearSelection();  <!-- 组件加载完成后立即清空选择框 -->
  },
};
</script>

关键点说明

1. 双向绑定选择框的值 (v-model="form.payment.bankAccountNumber"):

   • 选择框的值绑定到 form.payment.bankAccountNumber，当值改变时，form.payment.bankAccountNumber 也会更新。

2. 清空选择框 (clearable 和 ref):

   • clearable 属性使选择框可以清空。
   • ref="bankAccountSelect" 使得可以在方法中引用该选择框。

3. 在组件加载完成后清空选择框 (mounted 钩子):

   • mounted 钩子在组件加载完成后调用 clearSelection 方法。
   • clearSelection 方法将 form.payment.bankAccountNumber 设为空字符串，并使用 $nextTick 确保在 DOM 更新完成后调用 clear 方法清空选择框。