Neat! Pickled Muskrat!

    @yqg/vue

    1.20.0 • Public • Published

    这个 package 主要定位于将非 BaseUI 的一些公用 vue 组件、插件等收敛在一起,便于在项目间共用。

    antd components


    yqg-simple-form

    表单组件


    def-value

    主要给yqg-simple-table、yqg-static-form使用的根据fieldDef展示field的组件, 也可单独使用

    Property Description Type Default Value
    def def option,详见yqg-simple-table、yqg-static-form Object required
    value 字段值 [String, Number, Array, Boolean, Object] ''
    defaultText value 为空时展示 String ''
    • 展示类型
    Type Value Type View
    type: 'date' timestamp 日期
    type: 'dateTime timestamp 日期时间
    type: 'time' timestamp 时间
    type: 'rich' string HTML
    配置了filter -- filtered value
    配置了formOptions Array yqg-static-form
    配置了tableOptions Array yqg-simple-table

    yqg-static-form 静态展示表单

    • Form
    Property Description Type Default Value
    ctx 一般是父级this Object this.$parent
    title 表单标题,一般在使用modal时配置 string|slot ''
    values 数据对象 Object null
    options 表单配置对象 Object required
    layout 表单布局 inline|horizontal|verticla| inline一般用于查询表单,horizontal一般用于弹窗提交表单,vertical可以配合column属性使用 String 'inline'
    hideInvalid 隐藏空值field (!value && value !== 0) Boolean false
    • Form.options
    Property Description Type Default Value
    layout 表单布局,同Form.layout Object 'inline'
    column 配合vertical,多列展示,如{span: 12}, 2列 Object null
    labelCol label布局 Object {span: 4}
    wrapperCol 输入控件布局 Object 24-labelCol.span
    staticItemProps Form.Item.props Object {colon: false}
    fieldDefs 表单fields配置项 Array required
    • FieldDefOption

    注: 对于static-form,field内容展示有三种情况:slot | 通过staticComp配置的自定义组件 | def-value

    Property Description Type Default Value
    field 字段key String|slot required
    label 字段名称 String 若不配置,则不展示label占位;若需要占位但不展示label,可配置为空格' '
    type 控件类型, def-value根据type对展示内容进行处理 String --
    enumType enum,枚举类控件需要配置 String|Object|Enum --
    enumOptions 同@yqg/enum EnumOption, 若配置的i18n key 对应的是一个Array,则需配置 Object --
    format 用于格式化value,详见util/format.js, 可自定义 String|Object --
    hide 是否隐藏field Boolean|function({record, values, ctx}) => hideValue:Boolean fales
    staticComp 若配置则展示自定义组件 Component --
    staticProps field组件props, 可用于设置样式等 Object --
    staticItemProps a-form-item props Object --

    yqg-simple-table

    表格

    • Table
    Property Description Type Default Value
    ctx 一般为父组件this Object this.$parent
    options table配置 Object required
    records 数据数组 Array null
    pagination 分页数据对象 Object|Boolean {}
    defaulPagination初始化分页对象配置 Object {pageSizeOptions: ['10', '20', '50', '100', '200'],showSizeChanger: true}
    simpleEmpty 无数据时只展示“暂无数据“ Boolean false
    fontSize 字号 Number 13
    cellHorizontalPadding 单元格内边距 Number 20
    paginationInfinite 是否启用无限翻页模式 Boolean false
    • Table.options
    Property Description Type Default Value
    colDefs 数据列配置 Array []
    search 是否开启表内搜索 Boolean false
    enableClientSort 是否开启客户端排序 Boolean false
    enableSelectColumn 是否开启隐藏列 Boolean false
    scroll 滚动条配置 Object {x: true}
    rowSelection 配置可选行 Object null

    注:上述之外属性若放到options中,最后会bind到a-table上

    配置可选行:

    rowSelection: {
        rowKey: string,
        fixed: boolean,
        columnWidth: number,
        selectedRowKeys: array,
        onChange: function(selectedRowKeys: array, selectedRows: array): any,
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        })
    },
    
    • DefOption
    Property Description Type Default Value
    field 字段key String|slot required
    label 列title String --
    labelParam $t(label, labelParam) Array --
    column 列描述数据对象 Object {}
    column.sorter 列排序规则 String|Function 'string'
    enumType 枚举对象 String Object
    filter 全局注册过的过滤器 String --
    child 折叠列配置对象 {defaultVisible: Boolean, // 是否默认展示 colDefs: Array} null
    children 表头分组配置 Array null
    colSpan 表头列合并 Number null
    rowSpan 行合并 Number null
    • slot
    Name Description SlotScope
    title 自定义表头 {title, def}
    footer 表格尾部 currentPageData
    renderEmpty 无数据时展示 null
    • events
    Name Description params
    change 分页、排序、筛选变化时触发 Function(pagination, filters, sorter)
    expand 点击展开图标时触发 Function(expanded, record)
    expandedRowsChange 展开的行变化时触发 Function(expandedRowKeys)
    export-current-page 导出本页数据 Function({header, data})

    yqg-infinite-pagination

    无限分页组件

    Property Description Type Default Value
    pagination 分页数据对象 Object {}
    dataSize 当前页面数据量 Number null
    showSizeChanger 是否可以改变 pageSize Boolean true
    • events
    Name Description params
    change 分页,改变pageSize时触发 Function(pageNo, pageSize)

    Keywords

    none

    Install

    npm i @yqg/vue

    DownloadsWeekly Downloads

    607

    Version

    1.20.0

    License

    none

    Unpacked Size

    770 kB

    Total Files

    113

    Last publish

    Collaborators

    • hongweihu
    • iuwoo
    • ykboluo
    • yqg-owner
    • jxlnljt
    • yulodl
    • center620
    • zhchy
    • guxiaodai
    • northseacoder
    • wenxiujiang
    • zzj5470816
    • lixiaoxue
    • yyh_
    • szll
    • zhayoyang