**表單顯示隱藏** ***** ## 引入依賴 ``` import { usePermission } from '/@/hooks/web/usePermission'; const { hasPermission } = usePermission(); ``` hasPermission 函數接收后臺權限編碼,可傳遞數組hasPermission (['user:add']) ## BaseForm中使用方式 ### show方式控制 * **通過 [show](https://vvbin.cn/doc-next/components/form.html#formschema) 屬性動態判斷當前組件是否顯示，css 控制，不會刪除 dom** ``` { field: 'field1', component: 'Input', label: '字段1', show: ({ values }) => { return hasPermission('user:add'); } } ``` ### ifShow方式控制 * **通過 [ifShow](https://vvbin.cn/doc-next/components/form.html#formschema) 屬性動態判斷當前組件是否顯示，js 控制，會刪除 dom** ~~~ { field: 'field2', component: 'Input', label: '字段2', ifShow: ({ values }) => { return hasPermission('user:add'); } } ~~~ ## 插槽中使用方式 ~~~ <template #jSelectUser="{model, field }"> <JSelectUser v-model:value="model[field]" v-if="hasPermission('user:add')"/> </template> ~~~