基于antd封装的二次业务筛选组件-table-filter

最新推荐文章于 2024-07-18 09:23:55 发布

DiuDiu_yang

最新推荐文章于 2024-07-18 09:23:55 发布

阅读量614

点赞数

分类专栏： Vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_41261490/article/details/129164051

版权

文章展示了如何使用Vue组件`table-filter`进行业务筛选，支持多种类型的高级搜索，包括输入框、选择器、时间范围等。组件具有响应式布局，能根据屏幕尺寸动态调整显示行数和每行元素数量，并允许自定义配置如每行显示个数、标签宽度等。

摘要由CSDN通过智能技术生成

文档地址：https://flowerofsummer.github.io/components/

业务筛选组件

支持各种类型的高级搜索组件

基础用法

组件响应式布局，默认显示两行，可以通过 maxLineCount 配置最多显示行数
每行个数：如果含有 time-range，则在<1600,显示 3 个，否则显示 4 个；如果不含有 time-range，则在<1600,显示 4 个，否则显示 5 个；每行固定显示几个也可以自己配置 filterCount,默认值即是前面的 [3, 4, 5]
label：默认 label 110px（约 6 个中文字符，超出…tooltip 显示），固定宽度也可以自己配置 labelWidth

<template>
  <div>
    <table-filter
      :items="fileds"
      :filter-count="[4,5,6]"
    />
  </div>
</template>
<script lang="ts" setup>
const fileds = [
  {
   
    label: 'ip',
    prop: 'searchIpRef',
    type: 'textarea',
    defaultValue: '',
    customAttrs: {
   
      placeholder: '支持多个IP, 一行一个',
      allowClear: true
    }
  }, {
   
    label: '标签',
    prop: 'searchTag',
    type: 'select',
    // defaultValue: [],
    options: [
      {
   
        value: '',
        label: '所有'
      },
      {
   
        value: 'RUNNING',
        label: '运行中'
      },
      {
   
        value: 'TERMINATED',