[Extjs] 显示隐藏表单项

Posted 2023-05-12

参考技术A 表单里面有很多输入项，
有时候需要根据前面的选项，
来显示不同的输入项，

根据门户类别来隐藏和显示界面主题。

因为最外层 class 是 .x-form-item , 通 up 函数，找到对应元素，得到的是一个 Ext.Element 通过函数 setDisplayed 来设置元素的 display 样式。

Ext.Element 还有 hide() 和 show() 方法，不过 hide 隐藏后，高度不会变化。

另外附加踩过的坑

Element-ui关于form表单的踩坑

参考技术A 使用 v-if条件渲染el-form-item组件，并需要切换不用表单项时，需要在el-form-item组件上添加唯一的key属性值，防止切换后，新的el-form-item组件仍然显示切换前的表单错误验证提示

表单组件el-form封装后放在el-dialog组件内时，切换显示隐藏弹窗时，可以在封装的form组件上加上v-if并绑定el-dialog显示隐藏的布尔值，可以在el-dialog隐藏时同时销毁form组件，可以避免表单项及验证错误提示清除不完全的困扰（el-dialog组件的destroy-on-close属性有bug不起作用）。

初始化用v-model绑定在el-form上的表单数据时，最好放在created钩子函数里对表单数据复制，放在mounted里会触发change事件，从而会引起表单验证规则触发。