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

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

@clear="handleSmallCategoryClear"

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

<script setup lang="ts" name="QualityFileInfoDialog">
......
// 所属小类选择器清空内容
const handleSmallCategoryClear = () => {// 所属小类设置为空字符串qualityFileForm.value.smallCategory = "";
};
......
</script><template>
......<el-selectv-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-selectv-model="qualityFileForm.issueDept"placeholder="请选择"clearablefilterableallow-createdefault-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-selectv-model="qualityFileForm.detailCategory"placeholder="请选择"clearablefilterabledefault-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 质量体系文件*/@Overridepublic 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>