FastCrud

Appearance

crudOptions.search ​

查询框配置
更多参数见：FsSearch

show ​

  • 说明：显示或隐藏查询框
  • 类型：Boolean
  • 默认：true

buttons ​

  • 说明：按钮配置
  • 类型：Object
  • 默认： {search:{},reset:{}}
  • 相关：按钮组配置
  • 示例：
js
const crudOptions = {
  search: {
    buttons: {
        search:{
            ...FsButton, //fs-button组件的参数
            order:1, //排序，越小越靠前
            show:true,//是否显示此按钮
            click(){} //点击事件，默认触发查询
        },
        reset:{...同上},// 重置按钮
        custom:{...同上}//可以自定义
    }
  }
}
const crudOptions = {
  search: {
    buttons: {
        search:{
            ...FsButton, //fs-button组件的参数
            order:1, //排序，越小越靠前
            show:true,//是否显示此按钮
            click(){} //点击事件，默认触发查询
        },
        reset:{...同上},// 重置按钮
        custom:{...同上}//可以自定义
    }
  }
}

FsButton

buttonsPosition ​

  • 说明：按钮位置 (已废弃)
  • 类型：string，可选【default，bottom】
  • 默认：default

columns ​

  • 说明：查询字段配置
  • 类型：Object
  • 默认： {}
  • 示例：

columns[key][对应ui组件的配置] ​

  • 说明：支持对应ui库的form-item组件的配置
  • 支持：el-form-item,a-form-item,n-form-item的配置
  • 类型：Object
  • 备注：此属性无需配置，useCrud后会从crudOptions.columns[key].search中复制过来,你只需要配置各个字段的search即可

columns[key].component ​

  • 说明：查询字段组件配置
  • 类型：Object 参考组件配置component

options ​

  • 说明：表单参数
  • 类型：Object
  • 支持：el-form,a-form,n-form的参数

container ​

  • 说明：布局容器，支持search自定义布局
  • 类型：Object
  • 默认： {is:'fs-search-layout-default'}
  • 参考： fs-search-layout-default
js
const crudOptions = {
    search:{
        container:{
            is:'your-custom-layout-component-name',
            collapse:true, //是否展开，你布局组件中定义的props
            'onUpdate:collapse':(value)=>{
              crudBiding.value.search.container.collapse = value  
            },
            action:{
                label:"操作", //查询按钮前缀
                col:{ span: 4} //查询按钮所占格子宽度
            },
            col:{ span:4}, // 默认列宽度配置
            collapseButton:{ //展开按钮配置
                // fs-button 属性
            }
        },
    }
}
const crudOptions = {
    search:{
        container:{
            is:'your-custom-layout-component-name',
            collapse:true, //是否展开，你布局组件中定义的props
            'onUpdate:collapse':(value)=>{
              crudBiding.value.search.container.collapse = value  
            },
            action:{
                label:"操作", //查询按钮前缀
                col:{ span: 4} //查询按钮所占格子宽度
            },
            col:{ span:4}, // 默认列宽度配置
            collapseButton:{ //展开按钮配置
                // fs-button 属性
            }
        },
    }
}

onSearch ​

  • 说明：监听查询点击事件
  • 类型：async Function(context)
js
const crudOptions = {
    search:{
        onSearch(context:any){
            console.log('search click',context)
        }
    }
}
const crudOptions = {
    search:{
        onSearch(context:any){
            console.log('search click',context)
        }
    }
}

onReset ​

  • 说明：监听重置事件
  • 类型：async Function(context)
js
const crudOptions = {
    search:{
        onReset(context:any){
            console.log('reset click',context)
        }
    }
}
const crudOptions = {
    search:{
        onReset(context:any){
            console.log('reset click',context)
        }
    }
}

validate ​

  • 说明：是否启用表单验证
  • 类型：Boolean
  • 默认：false
  • 注意： naive-ui 需要配置 search.options.showFeedback 为true,才能显示错误提示
js
const crudOptions = {
    search:{
        validate:true,
        options:{
            showFeedback:true
        }
    }
}
const crudOptions = {
    search:{
        validate:true,
        options:{
            showFeedback:true
        }
    }
}

onValidateError ​

  • 说明：监听校验错误事件
  • 类型：async Function(context)
  • 默认值： ()=>{ui.notification.error({message:'查询表单校验失败'})} 弹出查询表单校验失败通知
js
const crudOptions = {
    search:{
        onValidateError(context:any){
            console.log('validate  error',context.error)
        }
    }
}
const crudOptions = {
    search:{
        onValidateError(context:any){
            console.log('validate  error',context.error)
        }
    }
}

autoSearch ​

  • 说明：是否字段变更后自动触发查询
  • 默认值：true

col ​

  • 说明：每项宽度统一配置
  • 示例：
js
const crudOptions = {
    search:{
        col:{
            span:6  // 表示每列占6/24宽度，一行4列
            //为了自适应，你也可以配置 {xs:6,sm:4,md:3,lg:2,xl:1}
            //或者直接配置 'auto'，流式排列
        }
    }
}
const crudOptions = {
    search:{
        col:{
            span:6  // 表示每列占6/24宽度，一行4列
            //为了自适应，你也可以配置 {xs:6,sm:4,md:3,lg:2,xl:1}
            //或者直接配置 'auto'，流式排列
        }
    }
}

更多参数 ​

  • 说明：更多参数见：FsSearch组件文档