Advanced search

Advanced search is the most commonly used function in data aggregation pages. Here will show you how to use it.

For specific configuration, you can click HERE to get.

Search form config

vue-table-view provide multiple form type for search. You can click HERE to get.

import { type Config, BaseFormType } from 'vue-table-view';

const config: Config<Record<string, unknown>> = {
  advancedSarch: [
    {
      field: 'id',
      title: 'ID',
      type: BaseFormType.Number,
      default: null,
      placeholder: 'Please input id number',
      clearable: true,
      extraConfig: {
        min: 0
      }
    },
    // ...
  ]
};

The code above will create a number search form. For different types of form configurations, click HERE to get.

Button config

You can config search / clear / expand 's text，and expand automatically (global config and component config also can set)

import type { Config } from 'vue-table-view';
const config: Config<Record<string, unknown>> = {
  searchButtonText: 'Search',
  resetSearchButtonText: 'Clear',
  expandButtonText: 'Expand',
  advancedSearchNeedExpanded: true
};