（三）vForm 动态表单解决下拉框无数据显示id问题
系列文章目录
文章目录
前言
在使用vform动态表单的过程中，遇到一个问题，某个表单中的机构下拉选组件，当此机构被从数据库删除的时候，此表单下保存的机构id就不能查到对应的机构名字，只能回显机构的id，这个问题我们在平时使用element-ui的时候都遇到过，可以通过在判断下拉选数据是否存在指定id值，从而控制下拉选组件的显示。
但在vform中，无法控制回显数据逻辑，且下拉选又很多，诸如机构、会员等等，所以想到通过修改element-ui源码的方式，做到所有下拉选如果id无对应数据，就显示空。
注：vform使用的ui框架即为element-ui
一、修改element-ui源码
1.找到文件element-ui.common.js，位置在node_mouduls下，element-ui 》lib》element-ui.common.js
2.找到getOption方法，修改如下图所示：左图为修改前，右图为修改后
修改前 修改后
接着改下面的setSelected方法
修改前 修改后
到这里，就已经实现了所有下拉款，如果无数据，就会显示空白，但此修改是在node_moudule中修改，而此文件夹是由依赖下载的文件，不由git管理的，所以此修改不能影响不了团队的其他成员，为了此修改全员可用，采用了打补丁的方式实现。
二、patch-package 补丁
1.安装依赖
// 使用npm安装 npm i patch-package // 使用yarn安装 yarn add patch-package postinstall-postinstall
2. package.json的scrpits增加postinstall
"postinstall": "patch-package"
3. 运行命令 npx patch-package element-ui
运行后会生成patches文件夹及补丁文件，注意文件名是对应的element-ui版本，此补丁只针对所示版本起效果，所以建议package.json中指定elemnt-ui版本。
4. npm install
运行npm install ，就会讲补丁打包进node_modules中，从而起效。
总结
此方式是针对element-ui的下拉选无数据情况的显示修改，不只针对vform的问题，所有使用elemnt-ui的项目都可使用。
原文地址：https://blog.csdn.net/weixin_41118302/article/details/139143325
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！