jeecgboot-vue3 BasicTable 搜索表单的小技巧

引言

在使用 BasicTable 时，开启表单搜索，若我们需要更为灵活的下拉框，比如查询的默认值绑定变量、级联选择等，使用 slot插槽 会是一种解决方法。

使用

默认值绑定变量

在searchFormSchema中，添加slot

js 复制代码

...
{
  label: '排课计划',
  field: 'sessionId',
  component: 'JInput',
  colProps: { span: 6 },
  slot: 'sessionId',
},
...

在 BasicTable 内部引入该插槽（BasicTable内部的搜索表单需要添加form-前缀）

js 复制代码

...
<template #form-sessionId="{model, field}">
  <a-select
    v-model:value="sessionId"
    :options="sessionList"
    @change="handleChange(model, field)"
    show-search
  />
</template>
...

定义handleChange逻辑，即可绑定默认值到变量上。

js 复制代码

function handleChange (data, field) {
  data[field] = sessionId.value;
}

本质上来说是对浅拷贝的一种应用：修改data对象本身。

另外，如果你期望避免BasicTable在未获取到默认值前的冗余加载，可以

js 复制代码

const {prefixCls, tableContext} = useListPage({
    ...
    beforeFetch: (params) => {
     params.sessionId = sessionId.value
    },
    immediate: false,
    ...
})

在加载到变量值之后，执行reload即可

因为handleChange需要点开选择框选择才能触发。beforeFetch内部函数的处理，是为了首次加载到变量值后，在未触发handleChange的情况下，依然可以正常将查询参数绑定。

级联选择

若涉及到多个选择框的级联，我们也可以使用如上方法绑定的变量，按条件渲染不同的option甚至不同的组件

例如：

js 复制代码

...
<template #form-params="{ model, field }">
  <span v-if="modelName==='A'">
    <SelectA :params="model[field]" @updateParam="(val) => updateParam(model, field, val)"/>
  </span>
  <span v-else-if="modelName==='B'">
    <SelectB :params="model[field]" @updateParam="(val) => updateParam(model, field, val)"/>
  </span>
  <span v-else-if="modelName==='C'">
    <SelectC :params="model[field]" @updateParam="(val) => updateParam(model, field, val)"/>
  </span>
  <span v-else>
    <a-input placeholder="请输入" v-model:value="model[field]"/>
  </span>
</template>
...

对应的updateParam

js 复制代码

function updateParam(model, field, val) {
  model[field] = val;
}

jeecgboot-vue3 BasicTable 搜索表单的小技巧

引言

使用

默认值绑定变量

级联选择

参考