Skip to content

v1.0.6 不兼容更新

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

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

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

详细使用文档请参考这里

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

vue
<!-- 更新前 -->
<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组件,详见表格文档。

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

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

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

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

ts
// 自定义表格侧边按钮
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)
        }
    })
})

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

ts
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 }) => {},
    }
)