在某些场景，如级联、表单联动，则需要自定义搜索功能，首先，我们需要取消全开框架生成的搜索功能，需要在生成的模块中找到index.vue文件，找到useTable并schemas属性给删掉，并在需要添加showSubmitButton: false，此属性是取消原来搜索功能的搜索按钮，将showResetButton设置为false，隐藏原来搜索功能的重置按钮，经过以上操作就会发现表格自带的搜索功能消失不见。
index.vue
<script lang="ts" setup>
// 前面代码省略
const [registerTable, { reload, }] = useTable({
title: (formName + '列表') || '',
api: getTestTablePage,
rowKey: 'id',
columns: filterColumns,
formConfig: {
rowProps: {
gutter: 16,
},
schemas: searchFormSchema, // 原始表单显示的表单项的配置
fieldMapToTime: [],
showResetButton: false, // 控制原始表单的重置功能，一般为“重置”按钮
showSubmitButton: false // 控制原始表单触发搜索的按钮的显隐，一般为“搜索”按钮
},
beforeFetch: (params) => {
return { ...params, FormId: formIdComputedRef.value, PK: 'id' };
},
afterFetch: (res) => {
tableRef.value.setToolBarWidth();
},
useSearchForm: true, // 是否使用搜索表单
showTableSetting: true,
striped: false,
actionColumn: {
width: 160,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
},
tableSetting: {
size: false,
setting: false,
},
});
// 后面省略代码
</script>
然后，自定义搜索表单，可以用ant-design-vue中的a-form，特别注意的，自定义搜索表单的字段必须存在表格已经定义的字段里面，若不存在的话，可能会导致该字段搜索无效，具体字段可以查看index.vue所在目录下的components对应的config.ts的searchFormSchema中的field，如下：
config.ts
/** 省略代码 **/
export const searchFormSchema: FormSchema[] = [
{
field: 'mingZi8847',
label: '名字',
component: 'Input',
},
{
field: 'zhi4547',
label: '值',
component: 'Input',
},
];
/** 省略代码 **/
接下来就是重写搜索功能，全开框架的BasicTable组件预留了一个headerContent的插槽，自定义的搜索功能就是写在这个插槽里面，而BasicTable组件提供了一个搜索表格方法beforeSearchInfoChange，我们只需要把搜索的字段和对应的值传入这个方法，接口实现与表格的联动，如下：
index.vue
<BasicTable @register="registerTable" ref="tableRef" @row-dbClick="dbClickRow">
<template #headerContent>
<a-form
layout="inline"
@submit="customHandleSubmit"
>
<a-form-item label="名字">
<a-input v-model:value="customSearchForm.mingZi8847" placeholder="请输入名称" />
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit">搜索</a-button>
</a-form-item>
</a-form>
</template>
<!-- 其余代码省略 -->
</BasicTable>
<script lang="ts" setup>
// 前面代码省略
const customSearchForm = reactive({
mingZi8847: '',
})
function customHandleSubmit() {
tableRef.value?.beforeSearchInfoChange(customSearchForm);
}
// 后面省略代码
</script>
特别注意：
1、在比较早的全开框架版本中，BasicTable组件的beforeSearchInfoChange并没有导出，最新版本则已经导出；若没有，则需要自己找到BasicTable组件手动导出，如下：
BasicTable.vue
<script lang="ts" setup>
// 前面代码省略
function beforeSearchInfoChange(info){
setSearchFormData(info);
handleSearchInfoChange(info);
}
// 中间代码省略
expose({...tableAction, beforeSearchInfoChange});
// 后面省略代码
</script>
2、全开框架的BasicTable组件预留了一个headerContent的插槽默认是在最右侧，若需让它靠左的话，可在index.vue中添加以下样式。
index.vue
<style lang="less" scoped>
// 前面代码省略
:deep(.ant-table-title) {
.items-center {
display: none;
}
}
</style>
如果你的搜索条件比较多，而且需要保持原有的样式，可以按照下面的方式进行二开。这里隐藏了原始代码，只给出template和样式的修改部分，事件绑定可以参考源文件里的组件定义。
<template>
<BasicTable ref="tableRef" @register="registerTable" @row-dbClick="dbClickRow">
<template #headerContent>
<!-- 默认form-item有下边距，这里写死高度，因为展开的时候还要保持下边距 -->
<div style="height: 32px">
<a-form class="vben-basic-form">
<!-- suspensionRow样式默认带了弹出效果 但是必须和vben-basic-form连用 -->
<a-row :class="{ suspensionRow: isAdv }">
<!-- 注意这里的层级，row部分是搜索表单，col里面的action是搜索按钮 -->
<a-row>
<a-col :span="8">
<a-form-item label="搜索字段1">
<a-input placeholder="请输入名称" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="搜索字段2">
<a-input placeholder="请输入名称" />
</a-form-item>
</a-col>
<a-col :span="8">
<a-form-item label="搜索字段3">
<a-input placeholder="请输入名称" />
</a-form-item>
</a-col>
<!-- 不展开的时候其余的字段隐藏 注意默认样式col-8在搜索中定死了宽度280px -->
<a-col :span="8" :style="{display: isAdv ? 'block' : 'none'}">
<a-form-item label="搜索字段4">
<a-input placeholder="请输入名称" />
</a-form-item>
</a-col>
<a-col :span="8" :style="{display: isAdv ? 'block' : 'none'}">
<a-form-item label="搜索字段5">
<a-input placeholder="请输入名称" />
</a-form-item>
</a-col>
<a-col :span="8" :style="{display: isAdv ? 'block' : 'none'}">
<a-form-item label="搜索字段6">
<a-input placeholder="请输入名称" />
</a-form-item>
</a-col>
</a-row>
<a-col>
<!-- 只要绑定事件就行 默认就开启了搜索、重置、展开这3个按钮 -->
<form-action :is-advanced="isAdv" @toggle-advanced="toggleAdv"></form-action>
</a-col>
</a-row>
</a-form>
</div>
</template>
</BasicTable>
</template>
<script setup>
import FormAction from '/@/components/Form/src/components/FormAction.vue';
const isAdv = ref(false);
function toggleAdv() {
// 注意form-action的展开状态不是自己保存的 需要外部状态控制
isAdv.value = !isAdv.value;
}
</script>
<style scoped>
/*隐藏原来表单的区域 否则中间会被占满*/
:deep(.ant-table-title .items-center) {
display: none;
}
/* 让展开时的搜索按钮和表单左右显示 */
:deep(.ant-row.suspensionRow) {
flex-wrap: nowrap;
}
</style>
效果如下
在某些场景，我们需要对表格的某些列进行定制化开发，例如显示进度条，tag标签等，可在BasicTable的bodyCell插槽里面添加，在bodyCell插槽里面尽量使用v-if/v-else-if，防止匹配多列的情况，其中：column为列的配置，record为数据源。特别注意：自定义表格列会覆盖原有的列，示例代码如下：
index.vue
<BasicTable @register="registerTable" ref="tableRef" @row-dbClick="dbClickRow">
<!-- 前面代码省略 -->
<template #bodyCell="{ column, record }">
<!-- 前面代码省略 -->
<template v-else-if="column.dataIndex === 'zhi4547'">
<a-progress :percent="record[column.dataIndex]" />
</template>
</template>
</BasicTable>
效果：
若你不需要分页，可以在BasicTable组件上，将pagination置为false即可取消分页，如下：
index.vue
<!-- 前面代码省略 -->
<BasicTable @register="registerTable" ref="tableRef" :pagination="false" @row-dbClick="dbClickRow">
<!-- 中间代码省略 -->
</BasicTable>
<!-- 后面代码省略 -->
修改分页，若需要调整分页的样式，BasicTable组件提供了获取分页配置接口getPaginationRef和设置分页配置接口setPagination，分页配置里面具体的参数可以参考Ant-Design-Vue的分页Pagination，修改分页配置生命周期onMounted修改，如下：我将分页修改成简单分页以及每页只展示1条数据。
index.vue
// 前面代码省略
<script lang="ts" setup>
import { nextTick } from 'vue';
// 中间代码省略
onMounted(() => {
// 中间代码省略
nextTick(() => {
const pagination = tableRef.value?.getPaginationRef();
pagination.simple = true;
pagination.pageSize = 1;
tableRef.value?.setPagination(pagination);
})
});
// 后面代码省略
</script>
效果如下：
BasicTable组件还提供了其他功能，如useTable中提供了beforeFetch和afterFetch方法，beforeFetch是表格发送请求前的拦截，可以在这里对参数进行处理；afterFetch是表格请求后返回的数据，可以在这里对返回的数据进行格式处理等，若你在afterFetch对数据进行处理，你必须把处理完的结果return回去，否则无法生效，如：我对表格返回的数据中的zhi4547全部设置为100。
index.vue
<script lang="ts" setup>
// 前面代码省略
const [registerTable, { reload, }] = useTable({
// 中间代码省略
beforeFetch: (params) => {
// 可以对筛选的参数params进行处理
return { ...params, FormId: formIdComputedRef.value, PK: 'id' };
},
afterFetch: (res) => {
const newRes = res.map(item => {
return {
...item,
zhi4547: 100
}
})
tableRef.value.setToolBarWidth();
return newRes;
}
// 中间代码省略
});
// 后面代码省略
</script>
效果如下：表格zhi4547字段所在的列（表格列名为：值）进度都为100%。
移动端暂不支持表格组件，移动端的子表展示形式是多组表单的形式，这里不多赘述。
',46)]))}const d=s(i,[["render",u]]),v=JSON.parse('{"path":"/front_dev/adv/table.html","title":"表格","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"PC端","slug":"pc端","link":"#pc端","children":[{"level":3,"title":"自定义表格搜索功能","slug":"自定义表格搜索功能","link":"#自定义表格搜索功能","children":[]},{"level":3,"title":"带有展开功能的搜索二开","slug":"带有展开功能的搜索二开","link":"#带有展开功能的搜索二开","children":[]},{"level":3,"title":"自定义表格列","slug":"自定义表格列","link":"#自定义表格列","children":[]},{"level":3,"title":"修改分页","slug":"修改分页","link":"#修改分页","children":[]},{"level":3,"title":"表格的其他功能","slug":"表格的其他功能","link":"#表格的其他功能","children":[]},{"level":3,"title":"移动端","slug":"移动端","link":"#移动端","children":[]}]}],"git":{"updatedTime":1748592359000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3},{"name":"Chen_Jie_Wen","username":"","email":"chen_junior@163.com","commits":5},{"name":"gaoyunqi","username":"","email":"gaoyunqi@gdyd.com","commits":1}],"changelog":[{"hash":"59b422a86f2f849b8c6b350ebbee8d78762110e1","time":1748592359000,"email":"gaoyunqi@gdyd.com","author":"gaoyunqi","message":"docs: 更新高级搜索的二开介绍"},{"hash":"dc0d515ab82a6e8e8bba217158197b368453eff7","time":1748426738000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: table文档-表格其他功能"},{"hash":"1cd0de4d9c53c6e980cce3a5d661a68e82d399ad","time":1748403560000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: table文档-修改分页"},{"hash":"4af82936ff5b6445d26bbb2e9d4a24bf28f96f16","time":1748339132000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: table文档自定义表格列"},{"hash":"262bfff5fb69dad24a8cd9532291de38cca325c1","time":1748329306000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: 调整自定义表格搜索功能文档"},{"hash":"412c2a8d273e8041c74673e5a1585dcaf6d120d1","time":1748314623000,"email":"chen_junior@163.com","author":"Chen_Jie_Wen","message":"feat: 重写table文档之自定义表格搜索功能"},{"hash":"9e158e6153179698d51a9c8bcbff1e8041b63b75","time":1744962112000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 自定义字段 form及table 文档"},{"hash":"15bb17fa4abbd90c367c26723576743b542e6c8a","time":1744948341000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 高级二开文档补充"},{"hash":"2e6e32b0e3baba1ad91f570dfa63514a97cb2d2b","time":1744795964000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 表单介绍：字段事件；高级二开：弹窗、表单、表格"}]},"filePathRelative":"front_dev/adv/table.md"}');export{d as comp,v as data};