vben-admin BasicTable 组件当中搜索框的使用

---

前言

vben-admin 表格当中可以在页面上方显示搜索框来对数据进行检索
未使用搜索框的页面如

代码如下:

<template>
  <BasicTable @register="registerTable" :pagination="{ pageSize: 20 }">
    <!-- 这里是显示列表标题的 -->
    <template #tableTitle>
      <Icon :icon="getTitle.icon" class="m-1 pr-1" />
      <span> {{ getTitle.value }} </span>
    </template>
    <template #toolbar>
      <a-button type="primary" @click="showBorder()"> 切换边框显示 </a-button>
      <a-button type="primary" @click="getTitleData()"> 获取表头数据 </a-button>
    </template>
  </BasicTable>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { getBasicColumns } from './tableData';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { getMemberListData } from '/@/api/test/mock';
  export default defineComponent({
    name: 'ViewsBuDeviceManageIndex',
    components: { BasicTable },
  });
</script>
<script lang="ts" setup>
  const columns = getBasicColumns();
  const [registerTable] = useTable({
    api: getMemberListData,
    columns: columns,
    showTableSetting: true,
    canResize: false,
    loading: false,
    striped: false,
  });

  const border = ref(false);

  function showBorder() {
    border.value = !border.value;
  }

  function getTitleData() {
    console.log(columns);
  }

  const getTitle = {
    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',
    value: router.currentRoute.value.meta.title || '参数管理',
  };
</script>

页面当中引用的getBasicColumns 代码如下

export function getBasicColumns(): BasicColumn[] {
  return [
    {
      title: '卡号',
      dataIndex: 'cardNo',
      fixed: 'left',
      width: 200,
      sorter: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      fixed: 'left',
      width: 200,
    },
    {
      title: '性别',
      dataIndex: ['sex', 'text'],
      fixed: 'left',
      width: 200,
    },
  ];
}

使用搜索框的页面实现效果如下 :

---

一、实现步骤

<template>
  <BasicTable @register="registerTable" :pagination="{ pageSize: 20 }">
    <!-- 这里是显示列表标题的 -->
    <template #tableTitle>
      <Icon :icon="getTitle.icon" class="m-1 pr-1" />
      <span> {{ getTitle.value }} </span>
    </template>
    <template #toolbar>
      <a-button type="primary" @click="showBorder()"> 切换边框显示 </a-button>
      <a-button type="primary" @click="getTitleData()"> 获取表头数据 </a-button>
    </template>
  </BasicTable>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicTable, useTable, FormProps } from '/@/components/Table';
  import { getBasicColumns } from './tableData';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { getMemberListData } from '/@/api/myMockApi/mock';
  export default defineComponent({
    name: 'ViewsBuDeviceManageIndex',
    components: { BasicTable },
  });
</script>
<script lang="ts" setup>
  const columns = getBasicColumns();
  // 这里定义搜索配置项,注意上方需要先引入的
  const searchForm: FormProps = {
    baseColProps: { lg: 4, md: 8 },
    labelWidth: 90,
    schemas: [
      {
        field: 'name',
        label: '姓名',
        component: 'Input',
        colProps: { span: 5 },
      },
      {
        // 下拉框
        field: 'gender',
        label: '性别',
        component: 'Select',
        colProps: { span: 5 },
        // 下拉框数据
        componentProps: {
          options: [
            {
              label: '男',
              value: '0',
            },
            {
              label: '女',
              value: '1',
            },
          ],
        },
      },
    ],
  };
  const [registerTable] = useTable({
    api: getMemberListData,
    columns: columns,
    showTableSetting: true,
    canResize: false,
    loading: false,
    striped: false,
    // 这里开启使用搜索框
    useSearchForm: true,
    // 搜索框的配置信息
    formConfig: searchForm,
  });

  const border = ref(false);

  function showBorder() {
    border.value = !border.value;
  }

  function getTitleData() {
    console.log(columns);
  }

  const getTitle = {
    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',
    value: router.currentRoute.value.meta.title || '参数管理',
  };
</script>

二、注意事项

1.首先请求需要是 get 请求,这样才会自动在后面查询拼接参数

请求如下：
myTable/member/_query?page=1&pageSize=20&gender=1&_t=1668249985187
这里会根据配置的搜索框的搜索项中的 value 自动传参