以默认的组件封装为例，我们可以看到3个控制显隐的部分
<template>
<Col v-if="getIfShow(schema, formModel[schema.field])" v-show="getIsShow(schema, formModel[schema.field])" :span="getColWidth(schema)">
<template v-if="showComponent(schema) && schema.type !== 'slot'">
<SimpleFormItem v-model:value="formModel[schema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schema" />
</template>
</Col>
</template>
showComponent是某些特殊组件的显隐控制，和组件类型有关，目前只有2个用到该值，一个是隐藏字段，一个是在非流程中隐藏审批意见字段。
而getIfShow和getIsShow的逻辑完全相同，都是判断ifShow和isShow（读的是show）的值，这两个值可以是bool也可以是函数，区别是：
对于流程绑定的显隐是show字段，这个字段由useWorkflowForm将流程节点配置的view参数转化得到，这里你也可以看到，流程通过dynamicDisabled字段控制只读编辑：
function getSchemePermissionItem() {
if (permissionConfig) {
//查看
schema.show = permissionConfig.view;
// 无用代码省略
if (isViewProcess) {
schema.dynamicDisabled = true;
}
} else {
schema.show = false;
schema.dynamicDisabled = true;
}
}
在SimpleFormItem里会读取这个show参数：
function getShow(schema: FormSchema): boolean {
const { show } = schema;
let isIfShow = true;
if (isBoolean(show)) {
isIfShow = show;
}
return isIfShow;
}
注意show的优先级大于isShow，这点从代码可以看出来，getIsShow函数中，如果show有值会覆盖掉isShow的值。
对于拆分后的代码，所有字段都是Col和SimpleFormItem，因此直接使用v-show控制显隐即可。对于非拆分的字段，可以复写配置的ifShow，注意以配置文件复写的ifShow在外层，和key同级：
// 无关属性省略
const field = {
key: '044e8bc1f9c345e0afa024ed7f21fe50',
field: 'duoXingWenBen3343',
label: '多行文本',
type: 'textarea',
// 四个参数分别为当前字段值、整个页面的model、当前字段配置、当前字段名
ifShow: function ({values, model, schema, field}) {
return model.danXingWenBen23227?.length > 10;
}
}
如果被控制的组件位于tab、grid等嵌套组件内，我们建议直接拆分后二开，对于非拆分二开，这里提供个思路：
function getIsShow(schema: FormSchema): boolean {
const { componentProps, show } = schema as any;
let isShow = true;
if (isBoolean(componentProps?.isShow)) {
isShow = componentProps.isShow;
} else if (typeof componentProps?.isShow === 'function') {
// 支持isShow的函数格式，这里的formModel为响应式，可以拿到表单的动态值
isShow = componentProps.isShow(formModel);
}
if (isBoolean(show)) {
// 要求show和isShow同时为真才显示
isShow = show && isShow;
}
return isShow;
}
这样就可以将isShow改为函数，动态计算显隐状态。
移动端组件显隐逻辑基本与PC端一致，不再赘述。
`,20)]))}const i=n(t,[["render",o]]),u=JSON.parse('{"path":"/front_dev/show_and_hide.html","title":"PC端设计","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"默认情况下的显示/隐藏设计","slug":"默认情况下的显示-隐藏设计","link":"#默认情况下的显示-隐藏设计","children":[]},{"level":2,"title":"二开控制显隐","slug":"二开控制显隐","link":"#二开控制显隐","children":[]}],"git":{"updatedTime":1747389721000,"contributors":[{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":3},{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":1}],"changelog":[{"hash":"188cbc46624542e1a9abf959efad3722b26c8754","time":1747389721000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新grid等嵌套组件的显隐控制方法"},{"hash":"2a3d23ec1d24173947de6a4bcab9d30b7e90134a","time":1744169755000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 更新文档 APP端 二开前准备及表单介绍部分"},{"hash":"ade1311d7bba455235b42db2e5f325116e3b86f4","time":1743940801000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新pc端前端文档"},{"hash":"6d1f2ad492629141aa9a6c3928f16e820688a85b","time":1743498223000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"更新前端文档：传值和显示隐藏部分"}]},"filePathRelative":"front_dev/show_and_hide.md"}');export{i as comp,u as data};