前端Element-plus的选择器 el-select 清空内容时，后端对应的更新方式，支持更新为null

BillKu

已于 2025-08-18 11:39:14 修改

阅读量95

点赞数

CC 4.0 BY-SA版权

文章标签：前端

于 2025-08-18 11:08:31 首次发布

本文链接：https://blog.csdn.net/BillKu/article/details/150486322

1、所属小类选择器 el-select 清空内容时，前端通过事件设置为空字符串

@clear="handleSmallCategoryClear"

【所属小类选择器】只能选择，不能输入信息

<script setup lang="ts" name="QualityFileInfoDialog">
......
// 所属小类选择器清空内容
const handleSmallCategoryClear = () => {
  // 所属小类设置为空字符串
  qualityFileForm.value.smallCategory = "";
};
......
</script>

<template>
......
                <el-select
                v-model="qualityFileForm.smallCategory"
                placeholder="请选择"
                clearable
                @clear="handleSmallCategoryClear">
                <el-option v-for="item in fileSmallCategoryList" :label="item.label" :value="item.value" />
              </el-select>
......
</template>

2、发布部门选择器 el-select 清空内容时，前端通过属性设置为空字符串

:value-on-clear="``"

注意：这里一定要使用:，

:value-on-clear="``"，这样才是空字符串

value-on-clear="``"，这样是``

【发布部门选择器】可以输入信息，支持新增选项，支持过滤，按回车默认选择第一个选项

<script setup lang="ts" name="QualityFileInfoDialog">
......

......
</script>

<template>
......
              <el-select
                v-model="qualityFileForm.issueDept"
                placeholder="请选择"
                clearable
                filterable
                allow-create
                default-first-option
                :value-on-clear="``">
                <el-option v-for="item in departmentList" :label="item.deptName" :value="item.deptName" />
              </el-select>
......
</template>

3、所属类别选择器 el-select 清空内容时，后端设置为~NULL~标识

【所属类型选择器】可以输入信息，支持过滤，按回车默认选择第一个选项

<script setup lang="ts" name="QualityFileInfoDialog">
......

......
</script>

<template>
......
              <el-select
                v-model="qualityFileForm.detailCategory"
                placeholder="请选择"
                clearable
                filterable
                default-first-option>
                <el-option v-for="item in fileDetailCategoryList" :label="item.label" :value="item.label" />
              </el-select>
......
</template>

后端处理：spring boot + mybatis

            // 所属类别，下拉选项支持可以更新为 null
            // 处理 null 的情况
            if (qualityFile.getDetailCategory() == null) {
                // 先标识为 ~NULL~，然后在Mybatis中再进行特殊处理
                qualityFile.setDetailCategory("~NULL~");
            }
            // 处理非 null 的情况
            else {
                if (storeQualityFile.getDetailCategory() != null &&
                    storeQualityFile.getDetailCategory().equals(qualityFile.getDetailCategory())) {
                    qualityFile.setDetailCategory(null);
                }
            }


    /**
     * 更新质量体系文件
     *
     * @param qualityFile 质量体系文件
     */
    @Override
    public void update(@NotNull QualityFile qualityFile) {
        if (qualityFile == null) return;
        QualityFile storeQualityFile = qualityFileMapper.selectByFileNo(qualityFile.getFileNo());
        if (storeQualityFile == null) return;
        // 两个对象的内容不相同，才进行更新
        if (!storeQualityFile.equals(qualityFile)) {
            // 只更新有修改过的属性，通过数据新旧值对比，如果数据没有变化，设置为 null，就不会进行更新
            // 序号
            if (storeQualityFile.getOrderNo() != null && qualityFile.getOrderNo() != null &&
                storeQualityFile.getOrderNo().equals(qualityFile.getOrderNo())) {
                qualityFile.setOrderNo(null);
            }
            // 文件编号，不能修改

            // 文件名称
            if (storeQualityFile.getFileName() != null && qualityFile.getFileName() != null &&
                storeQualityFile.getFileName().equals(qualityFile.getFileName())) {
                qualityFile.setFileName(null);
            }
            // 版本号
            if (storeQualityFile.getEdition() != null && qualityFile.getEdition() != null &&
                storeQualityFile.getEdition().equals(qualityFile.getEdition())) {
                qualityFile.setEdition(null);
            }
            // 修改记录
            if (storeQualityFile.getModifyRecord() != null && qualityFile.getModifyRecord() != null &&
                storeQualityFile.getModifyRecord().equals(qualityFile.getModifyRecord())) {
                qualityFile.setModifyRecord(null);
            }
            // 发布部门
            if (storeQualityFile.getIssueDept() != null && qualityFile.getIssueDept() != null &&
                storeQualityFile.getIssueDept().equals(qualityFile.getIssueDept())) {
                qualityFile.setIssueDept(null);
            }
            // 发布日期
            if (storeQualityFile.getIssueDate() != null && qualityFile.getIssueDate() != null &&
                storeQualityFile.getIssueDate().equals(qualityFile.getIssueDate())) {
                qualityFile.setIssueDate(null);
            }
            // 所属小类
            if (storeQualityFile.getSmallCategory() != null && qualityFile.getSmallCategory() != null &&
                storeQualityFile.getSmallCategory().equals(qualityFile.getSmallCategory())) {
                qualityFile.setSmallCategory(null);
            }
            // 所属类别，下拉选项支持可以更新为 null
            // 处理 null 的情况
            if (qualityFile.getDetailCategory() == null) {
                // 先标识为 ~NULL~，然后在Mybatis中再进行特殊处理
                qualityFile.setDetailCategory("~NULL~");
            }
            // 处理非 null 的情况
            else {
                if (storeQualityFile.getDetailCategory() != null &&
                    storeQualityFile.getDetailCategory().equals(qualityFile.getDetailCategory())) {
                    qualityFile.setDetailCategory(null);
                }
            }
            // 备注
            if (storeQualityFile.getRemark() != null && qualityFile.getRemark() != null &&
                storeQualityFile.getRemark().equals(qualityFile.getRemark())) {
                qualityFile.setRemark(null);
            }
        }

        qualityFileMapper.update(qualityFile);
    }

更新：


    <!-- 更新质量体系文件 -->
    <update id="update">
        update ControledFileMain
        <set>
            <!-- 序号 -->
            <if test="orderNo != null">
                Cfm_OrderID = #{orderNo},
            </if>
            <!-- 文件编号，不能修改 -->

            <!-- 文件名称 -->
            <if test="fileName != null">
                Cfm_Name = #{fileName},
            </if>
            <!-- 版本号 -->
            <if test="edition != null">
                Cfm_Edition = #{edition},
            </if>
            <!-- 修改记录 -->
            <if test="modifyRecord != null">
                Cfm_ModifyRecord = #{modifyRecord},
            </if>
            <!-- 所属小类 -->
            <if test="smallCategory != null">
                Cfm_SmallType = #{smallCategory},
            </if>
            <!-- 所属类别，下拉选项支持可以更新为 null -->
            <if test="detailCategory != null">
                <if test="detailCategory == '~NULL~'">
                    Cfm_SampleType = null,
                </if>
                <if test="detailCategory != '~NULL~'">
                    Cfm_SampleType = #{detailCategory},
                </if>
            </if>
            <!-- 发布部门 -->
            <if test="issueDept != null">
                Cfm_Dept = #{issueDept},
            </if>
            <!-- 发布日期 -->
            <if test="issueDate != null">
                Cfm_IssueDate = #{issueDate},
            </if>
            <!-- 备注 -->
            <if test="remark != null">
                Cfm_Memo = #{remark},
            </if>
        </set>
        where Cfm_ID = #{fileNo}
    </update>