vxe grid中form按钮组折叠状态下的span

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 实现了需求的效果

相关推荐
十里青山6 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45315 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^16 分钟前
条件渲染 v-show与v-if
前端
棉花糖超人24 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
小小小小宇8 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊8 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习8 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖9 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖9 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水9 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js