BuildAdmin

# v1.0.6 不兼容更新

# 表单验证规则构建函数传参方式调整

// 更新前
buildValidatorData('required', '', 'change', '请输入用户名')

// 更新后
buildValidatorData({ name: 'required', trigger: 'change', message: '请输入用户名' })

详细使用文档请参考这里 (opens new window)

# 去除TableHeader组件的action事件，无需再手动绑定

<!-- 更新前 -->
<TableHeader
    :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
    :quick-search-placeholder="t('quick Search Placeholder', { fields: t('auth.admin.username') + '/' + t('auth.admin.nickname') })"
    @action="baTable.onTableHeaderAction"
/>

<!-- 更新后 -->
<TableHeader
    :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
    :quick-search-placeholder="t('quick Search Placeholder', { fields: t('auth.admin.username') + '/' + t('auth.admin.nickname') })"
/>

# 去除Table组件的action事件，无需再手动绑定

另外，新的表格还优化了单元格渲染，增加插槽支持等，在插槽内可以使用el-table-column组件，详见表格文档。

<!-- 更新前 -->
<Table @action="baTable.onTableAction" />

<!-- 更新后 -->
<Table />

# 不再使用事件巴士监听表格相关事件

包括表格内的换页、搜索、表头、行类事件响应均以不再使用事件巴士监听，所以现在多表格可以更好的共存了

// 自定义表格侧边按钮
let optButtons: OptButton[] = [
    {
        render: 'tipButton',
        name: 'info',
        title: 'info',
        text: '',
        type: 'primary',
        icon: 'fa fa-search-plus',
        class: 'table-row-edit',
        disabledTip: false,
        // 更新后直接使用 click 属性
        click: (row: TableRow) => {
            infoButtonClick(row)
        },
    },
]


// 更新前
onMounted(() => {
    const { proxy } = useCurrentInstance()
    /**
     * 表格内的按钮响应
     * @param name 按钮name
     * @param row 被操作行数据
     */
    proxy.eventBus.on('onTableButtonClick', (data: { name: string; row: TableRow }) => {
        if (!baTable.activate) return
        if (data.name == 'info') {
            infoButtonClick(data.row)
        }
    })
})

# 优化表格前后置事件的类型定义

const baTable = new baTableClass(
    new baTableApi(authGroup),
    {
        column: [
            // 列数据...
        ]
    },
    {
        defaultItems: {}
    },
    // 更新前
    {
        onSubmit: ({ formEl, operate, items }: { formEl: FormInstance | undefined; operate: string; items: anyObj }) => {

        }
    },
    // 更新后无需再声明参数类型，直接使用即可，其他所有前后置事件也均已定义好参数类型
    {
        onSubmit: ({ formEl, operate, items }) => {

        }
    },
    // 更新前的后置埋点
    {
        onSubmit: ({ res }: {res: ApiResponse}) => {

        }
    },
    // 更新后的后置埋点
    {
        onSubmit: ({ res }) => {
            
        }
    }
)

← v1.1.2 →