UI需求查询表单和按钮始终要一排
万事第一步,看文档
因为是要设置折叠,就搜索的collapse 事件有form-collapse
,很快哦 第一版就出来了
js
formConfig: {
collapseStatus: collapseStatus.value,
}
{
span: collapseSpan.value,
align: 'right',
collapseNode: true,
slots: {
default: () => {
return (
<>
<ElButton type="primary" onClick={() => setSearchParams()}>
查询
</ElButton>
<ElButton type="info" onClick={() => resetSearchParams()}>
重置
</ElButton>
</>
)
}
}
}
const handleFormCollapse = (e) => {
collapseStatus.value = e.status
console.log('collapseStatus', collapseStatus.value)
console.log('collapseSpan', collapseSpan.value)
}
const collapseSpan = computed(() => {
return collapseStatus.value ? 4 : 24
})
log信息的无误的,collapseSpan会根据状态切换4或24,但效果并不是需求的
原因我理解是虽然collapseSpan状态切换了,但组件没有重新渲染,所以为默认的span:4。于是寻找重新渲染Form组件的API,很可惜没有找到。
有更准确的原理可以评论区回复
问题解决
既然没有API,那就通过CSS解决,继续看文档,item里还有个属性为className
,参数和返回值为({ field, data }) => string
log信息如下
很好 查看到了按钮组的span,那就在这尝试修改下信息
js
const collapseNodeSpan = ({ item }) => {
item.span = collapseStatus.value ? 4 : 24
return 'collapseNodeSpan'
}
效果如下
ok 实现了需求的效果