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