选择全部，传空字符串效果

选择全部，传空字符串效果

<template>
  <el-form
    :model="queryParams"
    label-width="80px"
    style="width: 400px; padding: 20px"
  >
    <el-form-item label="规则来源" prop="ruleSource">
      <el-select
        v-model="queryParams.ruleSource"
        clearable
        :empty-values="[null, undefined]"
        style="width: 180px"
      >
        <!-- 全部选项，绑定值为空字符串 -->
        <el-option key="all" label="全部" :value="''" />

        <!-- 其他选项 -->
        <el-option
          v-for="item in alarmRulesList"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        />
      </el-select>
    </el-form-item>

    <!-- 测试按钮 -->
    <el-form-item>
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>

    <!-- 调试显示 -->
    <el-form-item label="当前值">
      <span>{{
        queryParams.ruleSource === "" ? "空字符" : queryParams.ruleSource
      }}</span>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive } from "vue";

// 表单数据
const queryParams = reactive({
  ruleSource: "", // 默认值为空字符串 => 默认显示“全部”
});

// 模拟选项数据
const alarmRulesList = [
  { label: "系统规则", value: "system" },
  { label: "用户自定义", value: "custom" },
  { label: "外部导入", value: "external" },
];

// 查询事件
const handleSearch = () => {
  console.log("查询参数：", queryParams);
};

// 重置事件
const resetForm = () => {
  queryParams.ruleSource = ""; // 重置为“全部”
};
</script>