Hamlet-Web

Appearance

全局配置 ​

在 src/main.js 注册组件时，可以自定义一些配置项。

ts
import hRender from '@hamlet/render'

import App from './App.vue'
import './style.css'

createApp(App)
    .use(hRender, {
        formRender: {
            type: 'dialog',
            column: 1,
            labelPosition: 'right',
            labelWidth: 80,
        },
        tableRender: {
            rowKey: 'id',
            pageNoKey: 'pageNo',
            pageSizeKey: 'pageSize',
            pagination: {
                defaultPageSize: 10,
                pageSizes: [10, 20, 50, 100],
                layout: 'total, sizes, prev, pager, next, jumper',
                background: true,
            },
        },
    })
    .mount('#app')
import hRender from '@hamlet/render'

import App from './App.vue'
import './style.css'

createApp(App)
    .use(hRender, {
        formRender: {
            type: 'dialog',
            column: 1,
            labelPosition: 'right',
            labelWidth: 80,
        },
        tableRender: {
            rowKey: 'id',
            pageNoKey: 'pageNo',
            pageSizeKey: 'pageSize',
            pagination: {
                defaultPageSize: 10,
                pageSizes: [10, 20, 50, 100],
                layout: 'total, sizes, prev, pager, next, jumper',
                background: true,
            },
        },
    })
    .mount('#app')

formRender ​

表单渲染配置

type ​

  • 类型: String
  • 默认值: dialog

表单打开方式，可选值 dialog | drawer | form。

column ​

  • 类型: Number
  • 默认值: 1

几列展示，可选值 1 | 2 | 3| 4。

labelPosition ​

  • 类型: String
  • 默认值: right

表单域标签的位置。参考

labelWidth ​

  • 类型: Number
  • 默认值: 80

标签长度。

tableRender ​

表格渲染配置。

rowKey ​

  • 类型: String
  • 默认值: id

行数据的 Key，用来优化 Table 的渲染。

pagination ​

表格分页配置。参考 element-plus Pagination 分页

pagination.defaultPageSize ​

  • 类型: Number
  • 默认值: 10

每页显示条目个数。

pagination.pageSizes ​

  • 类型: Number[]
  • 默认值: [10, 20, 50, 100]

每页显示个数选择器的选项设置。

pagination.layout ​

  • 类型: String
  • 默认值: total, sizes, prev, pager, next, jumper

组件布局，子组件名用逗号分隔。

pagination.background ​

  • 类型: Boolean
  • 默认值: true

是否为分页按钮添加背景色。