TableSearch 筛查

多条件查询。

何时使用

在存在多个查询条件时使用

• 当存在一个或多个查询条件时。
• 当需要和table进行数据联动时。

代码演示

1. 默认效果

测试：

性别：

请选择性别

默认效果

通过options定义查询内容

<template>
  <z-table-search :options="options" @search="searchChange" :column="2"></z-table-search>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { tableSearchOptions, tableSearchEvt } from "@d7ee/z-base-ui";

const options = ref<tableSearchOptions[]>([
  {
    type: "input",
    label: "测试",
    key: "name",
  },
  {
    type: "select",
    label: "性别",
    key: "sex",
    options: [
      {
        label: "男",
        value: "0"
      },
      {
        label: "女",
        value: "1"
      }
    ]
  }
]);

const searchChange = (e: tableSearchEvt) => {
  console.log(e);
};
</script>

2. 自定义筛选条件

性别：

请选择性别

自定义：

自定义

通过具名插槽bodyCelll自定义查询条件，使用属性label定义名称

<template>
  <z-table-search :options="options" @reset="resetCallback" @search="searchChange" :column="2">
    <template #bodyCell>
      <a-input v-model:value="hobby" label="自定义" placeholder="请输入"></a-input>
      <div class="customBox" label="测试项">
        <a-button size="small">测试按钮</a-button>
      </div>
    </template>
  </z-table-search>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { tableSearchOptions, tableSearchEvt } from "@d7ee/z-base-ui";

const hobby = ref<string>("");
const options = ref<tableSearchOptions[]>([
  {
    type: "select",
    label: "性别",
    key: "sex",
    options: [
      {
        label: "男",
        value: "0"
      },
      {
        label: "女",
        value: "1"
      }
    ]
  }
]);

const searchChange = (e: tableSearchEvt) => {
  console.log(e);
  console.log("hobby", hobby.value);
};

// 重置时，清除自定义的结果
const resetCallback = () => {
  hobby.value = "";
}
</script>

API

props

参数	说明	类型	默认值	版本
options	查询条件，详见options	tableSearchOptions[]	[]	>= 0.0.8
instantly	当状态发生改变时，立即触发change	boolean	false	>= 0.0.8
v-model	将搜索结果进行关联反馈，详见value	v-model	{}	>= 0.0.12
column	每行显示多少列	number	4	>= 0.0.8
open	默认显示所有条件	boolean	false	>= 0.0.17
save	用户点击重置时，如果条件存在默认值，是否重置为默认值	boolean	true	>= 0.1.4

props-options

参数options说明

Arraya<{type, key, label, ...args}>

参数	说明	类型	默认值	版本	必填
type	条件类型，内置21种查询条件，详见type	string		>= 0.0.8	✅
key	唯一值	string		>= 0.0.8	✅
label	标题	string		>= 0.0.8	✅
value	默认值	any		>= 0.0.8
placeholder	提示内容	string | string[]	内置语句+label	>= 0.0.8
lw	自定义label宽度	string		>= 0.0.8
options	下拉，级联选项配置项，详见[item][]	Array	[]	>= 0.0.8
search	下拉，级联模糊搜索	boolean	true	>= 0.0.8
required	必填标识项，带红色*号的标识符	boolean	true	>= 0.0.13

options-type

类型	说明	类型	版本
input	文本输入框	string	>= 0.0.8
number	数字输入框	string	>= 0.0.8
select	下拉选择框	string	>= 0.0.8
selects	下拉多选	string	>= 0.0.8
cascade	级联选择，单选只能选择最后一层	string	>= 0.0.8
cascader	级联选择，单选可以选择任意层级	string	>= 0.0.8
cascades	级联选择，多选	string	>= 0.0.8
time	时分秒选择器	string	>= 0.0.8
timeRange	时分秒区间范围选择器	string	>= 0.0.8
dateTime	日期时间选择器	string	>= 0.0.9
dateTimeR	日期时间区间范围选取	string	>= 0.0.9
date	日期选择器	string	>= 0.0.8
dateRange	日期区间范围选择器	string	>= 0.0.8
dateW	周选择器	string	>= 0.0.8
dateM	月选择器	string	>= 0.0.8
dateQ	季度选择器	string	>= 0.0.8
dateY	年份选择器	string	>= 0.0.8
dateRM	月份范围选择器	string	>= 0.0.8
dateRQ	季度范围选择	string	>= 0.0.8
dateRW	周范围选择	string	>= 0.0.8
dateRY	年范围选择	string	>= 0.0.8

v-model

• 何时使用：需要简便的获取查询结果时
• 实时反馈：在未启用instantly时，只有点击搜索或重置时才会更新
• 返回值：返回一个对象由key，value组成{key: val, ...args}
• 实时监听：我想知道是谁引发了变化，它的旧值和新值是什么？参考change
• 注意事项：
  • 实时反馈：启用instantly后，如果查询条件存在input类型，请慎重使用watch对它进行监听，在input框内的每个字符的变动都会引发它的实时更新
  • 默认值：注意您无法通过设置v-model给它设定默认值

<template>
  <z-table-search v-model="searchRes"/>
</template>

<script setup lang="ts">
import { ref } from "vue";

const searchRes = ref<Record<string, any>>({})
</script>

事件

事件	说明	类型	版本
search	点击搜索时回调，详见返回值	function(e)	>= 0.0.8
reset	重置时回调，详见返回值	function(e)	>= 0.0.8
change	状态改变时回调，需要配合instantly使用，详见返回值	function(e)	>= 0.0.8
resetCustomItem	清除或设定某几项条件的状态，需要通过ref获取实列后在进行调用，详见返回值	function(e)	>= 0.1.2

代码演示

<template>
  <z-table-search @search="searchChange"/>
</template>

<script lang="ts" setup>
import {tableSearchEvt} from "@d7ee/z-base-ui";

const searchChange = (e: tableSearchEvt) => {
  console.log(e);
};
</script>

返回值

search，reset，change事件的返回值如下

{
  type: "search", // 类型 update - 实时, search - 搜索, reset - 重置
  data: { // 值
    name: "xxx",
    sex: "0"
  },
  // 以下参数为启用instantly时,chang事件所携带的扩展字段
  key: string, // 发生更新的键名，props-options.key
  old: any, // 发生变动前的值
  new: any, // 更新后的值
}

resetCustomItem

版本需求：>= 0.1.2

何时使用：当你在某种特定场景下，需要重置或重设某些条件的状态，又不想重置所有的条件时使用

注意事项：你需要通过ref获取实列后主动调用，你需要传入需要重置状态的key，它来自key等同于props-options-key

• 参数形态(支持三种类型)
  • string 用于重置一项
  • string[] 用于重置多项
  • Array<{key: string, value: any}> 用于重置或改变多项

<template>
  <z-table-search ref="rTable" :options="options"></z-table-search>
  
  <button @click="clearCustomItem">重置状态</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { tableSearchOptions } from "@d7ee/z-base-ui";


const rTable = ref<any>();
const options = ref<tableSearchOptions[]>([
  {
    type: "input",
    label: "测试",
    key: "name",
  },
  {
    type: "select",
    label: "性别",
    key: "sex",
    options: [
      {
        label: "男",
        value: "0"
      },
      {
        label: "女",
        value: "1"
      }
    ]
  }
]);

const clearCustomItem = () => {
  rTable.value.resetCustomItem("name"); // 重置一项
  //.resetCustomItem(["sex", "name"]); 重置多项
  //.resetCustomItem([{key: "name", value: "123"}]); 修改某项的状态
}
</script>

slot 自定义筛选条件

版本需求：>= 0.0.13

何时使用，当现有查询条件不满足业务需求或使用场景时

如何使用：通过具名插槽，bodyCell进行自定义

注意事项

• 每个节点外层都会被强制包裹一层div，这样做的目的是为了整体效果，避免上下行每列数据无法对齐，导致整体错乱。
• label 属性，也许你在自定义示列中发现了它的存在，通过给节点添加属性 label 来定义它的名称，它等同于props-options-label，当然你也可以不使用它。
• lw 属性，在 0.0.19 版本中新增了lw属性用于自定义label的宽度，在使用时你需要携带单位如：50px

<template #bodyCell>
  <a-input label="性别" lw="50px"></a-input>
  <div class="customBox" label="测试项">
    <a-button size="small">测试按钮</a-button>
  </div>
</template>