Multistage 条件筛选

多条件筛选

何时使用

当存在多个筛选条件时使用

代码演示

1. 默认效果

期望薪资：

1001

2001

3001

4001

5001

6001

7001

8001

9001

10001

11001

12001

13001

14001

15001

16001

17001

18001

19001

展开

劳动年龄：

展开

个人兴趣爱好：

不限

音乐

阅读

跑步

瑜伽

羽毛球

篮球

展开

默认效果

简单的配置效果

<template>
  <z-multistage :options="options" v-model="searchVals"></z-multistage>
</template>

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

const searchVals = ref<IMtChange["data"]>({});

const options = ref<IMtOptions[]>([
  {
    name: "期望薪资",
    value: "wages",
    children: new Array(20).fill(1).map((r: number, i) => ({
      name: `${r + i * 1000}`,
      value: i,
    }))
  },
  {
    name: "劳动年龄",
    value: "age",
    children: new Array(20).fill(1).map((r: number, i) => ({
      name: `${r + i * 5}`,
      value: i,
    }))
  },
  {
    name: "个人兴趣爱好",
    value: "love",
    children: ['不限', '音乐', '阅读', '跑步', '瑜伽', '羽毛球', '篮球'].map((name, i) => ({
      name: name,
      value: i,
    }))
  },
]);

</script>

2. 全局选中与多选

期望薪资：

不限

101

展开

劳动年龄：

不限

101

展开

个人兴趣爱好：

不限

音乐

阅读

跑步

瑜伽

羽毛球

篮球

展开

全局匹配和多选

通过设置“dft”来匹配选中所有条件中包含dft值的条件项，启用check标识为多选

<template>
  <z-multistage :options="options" v-model="searchVals" dft="clear"></z-multistage>
</template>

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

const searchVals = ref<IMtChange["data"]>({});

const options = ref<IMtOptions[]>([
  {
    name: "期望薪资",
    value: "wages",
    children: ["不限", ...new Array(20).fill(1)].map((r: number, i) => ({
      name: typeof r === "string" ? r : `${r + i * 5}`,
      value: i === 0 ? "clear" : i,
    }))
  },
  {
    name: "劳动年龄",
    value: "age",
    children: ["不限", ...new Array(20).fill(1)].map((r: number | string, i) => ({
      name: typeof r === "string" ? r : `${r + i * 5}`,
      value: i === 0 ? "clear" : i,
    }))
  },
  {
    name: "个人兴趣爱好",
    value: "love",
    check: true,
    children: ['不限', '音乐', '阅读', '跑步', '瑜伽', '羽毛球', '篮球'].map((name, i) => ({
      name: name,
      value: i === 0 ? "clear" : i,
    }))
  },
]);

</script>

3. 默认选中

期望薪资：

不限

101

展开

劳动年龄：

不限

101

展开

个人兴趣爱好：

不限

音乐

阅读

跑步

瑜伽

羽毛球

篮球

展开

默认选中

通过设置“select”来设置初始值

<template>
  <z-multistage :options="options" v-model="searchVals" dft="clear"></z-multistage>
</template>

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

const searchVals = ref<IMtChange["data"]>({});

const options = ref<IMtOptions[]>([
  {
    name: "期望薪资",
    value: "wages",
    select: 2,
    children: ["不限", ...new Array(20).fill(1)].map((r: number, i) => ({
      name: typeof r === "string" ? r : `${r + i * 5}`,
      value: i === 0 ? "clear" : i,
    }))
  },
  {
    name: "劳动年龄",
    value: "age",
    children: ["不限", ...new Array(20).fill(1)].map((r: number | string, i) => ({
      name: typeof r === "string" ? r : `${r + i * 5}`,
      value: i === 0 ? "clear" : i,
    }))
  },
  {
    name: "个人兴趣爱好",
    value: "love",
    check: true,
    select: [2, 4],
    children: ['不限', '音乐', '阅读', '跑步', '瑜伽', '羽毛球', '篮球'].map((name, i) => ({
      name: name,
      value: i === 0 ? "clear" : i,
    }))
  },
]);

</script>

4. 多级联动

期望薪资：

不限

101

展开

劳动年龄：

不限

101

展开

个人兴趣爱好：

不限

音乐

阅读

跑步

瑜伽

羽毛球

篮球

展开

多级联动

通过设置“parnetId”来设置关联关系，当父ID发生改变，与其关联的条件就会被重置

<template>
  <z-multistage :options="options" v-model="searchVals" dft="clear"></z-multistage>
</template>

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

const searchVals = ref<IMtChange["data"]>({});

const options = ref<IMtOptions[]>([
  {
    name: "期望薪资",
    value: "wages",
    children: ["不限", ...new Array(20).fill(1)].map((r: number, i) => ({
      name: typeof r === "string" ? r : `${r + i * 5}`,
      value: i === 0 ? "clear" : i,
    }))
  },
  {
    name: "劳动年龄",
    value: "age",
    parentId: "wages",
    children: ["不限", ...new Array(20).fill(1)].map((r: number | string, i) => ({
      name: typeof r === "string" ? r : `${r + i * 5}`,
      value: i === 0 ? "clear" : i,
    }))
  },
  {
    name: "个人兴趣爱好",
    value: "love",
    check: true,
    parentId: ["wages", "age"],
    children: ['不限', '音乐', '阅读', '跑步', '瑜伽', '羽毛球', '篮球'].map((name, i) => ({
      name: name,
      value: i === 0 ? "clear" : i,
    }))
  },
]);

</script>

5. 禁止选中

期望薪资：

1001

2001

3001

4001

5001

6001

7001

8001

9001

10001

11001

12001

13001

14001

15001

16001

17001

18001

19001

展开

劳动年龄：

展开

个人兴趣爱好：

音乐

阅读

跑步

瑜伽

羽毛球

篮球

展开

默认选中

通过设置disabled来禁止选中某些条件或整行

<template>
  <z-multistage :options="options" v-model="searchVals"></z-multistage>
</template>

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

const searchVals = ref<IMtChange["data"]>({});

const options = ref<IMtOptions[]>([
  {
    name: "期望薪资",
    value: "wages",
    disabled: true,
    children: new Array(20).fill(1).map((r: number, i) => ({
      name: `${r + i * 1000}`,
      value: i,
    }))
  },
  {
    name: "劳动年龄",
    value: "age",
    children: new Array(20).fill(1).map((r: number, i) => ({
      name: `${r + i * 5}`,
      value: i,
    }))
  },
  {
    name: "个人兴趣爱好",
    value: "love",
    check: true,
    children: ['音乐', '阅读', '跑步', '瑜伽', '羽毛球', '篮球'].map((name, i) => ({
      name: name,
      value: i,
      disabled: name === "跑步"
    }))
  },
]);

</script>

API

props

参数	说明	类型	默认值	版本
options	查询条件，详见props-options，`必填项`	Array<IMtOptions>	[]	>= 0.1.1
~~all~~	~~默认选中所有条件中符合`dft`的值~~，在>=0.1.3版本中被`移除`	~~boolean~~	~~false~~	~~>= 0.1.1~~
dft	当dft有值时，全局匹配选中符合dft值的条件	string	null	>= 0.1.1
lw	标题宽度	string	100px	>= 0.1.1
value	通过v-model绑定，实时获取结果	string	{}	>= 0.1.1
color	被选中时的文字颜色	string	#ffffff	>= 0.1.5
bg	被选中时的背景颜色	string	#ff6000	>= 0.1.5

props-options

类型	说明	类型	默认值	版本
name	标题，`必填项`	string		>= 0.1.1
value	唯一值，将会用做返回结果集的key，`必填项`	string		>= 0.1.1
children	选择条件，`必填项`	Array<{name, value, disabled}>	[]	>= 0.1.1
parentId	父ID，多级联动时使用，当父ID发生变化时，当前条件移除选中状态	string \| number \| Array<string \| number>	null	>= 0.1.3
disabled	当前行禁至被选中	boolean	false	>= 0.1.1
check	多选，允许当前行选择一个或多个	boolean	false	>= 0.1.1
select	初始值，用于设置默认选中状态	string \| string[]	null	>= 0.1.1
open	默认显示当前行所有条件	boolean	false	>= 0.1.1
isOpen	是否显示展开按钮，详见isOpen	string \| boolean	auto	>= 0.1.1

参数演示

javascript

// 查询条件
const optipons = [
    {
        name: "年龄", // 标题
        value: "age", // 唯一值，相当于key
        children: [ // 条件项
            {
                name: "10岁以下",
                value: "10"
            },
            {
                name: "10岁 ~ 20岁",
                value: "20",
                disabled: true, // 禁止选中当前条件
            }
        ]
    }
];

// v-model结果
const searchRes = {
    "age": "10"
}

props-isOpen

默认值为：auto

auto：isOpen 为 auto 时，将自动计算是否存在多行条件，存在则显示展开按钮，不存在则隐藏，若外层宽度未固定，当宽度发生变化后，也会触发调整。
true：一直显示暂开按钮，除非变为fasle

自定义插槽

插槽名	说明	参数	版本
footer	底部自定义插槽，在底部自定义内容进行扩展		>= 0.1.1
~~open~~	~~自定义展开按钮~~,在>=0.1.3版本后暂时被`移除`	~~status: boolean~~	~~>= 0.1.1~~

open插槽，接收一个参数status，为boolean，你可以通过它来判断当前是处于展开还是折叠

事件

事件	说明	类型	版本
change	状态改变时回调，详见change	function(e)	>= 0.1.1
resetValue	重置所有状态，通过ref调用，详见resetvalue	function(e)	>= 0.1.1
resetCustomCondition	重置或修改指定项，通过ref调用，详见resetcustomcondition	function(e)	>= 0.1.3
~~callbackState~~	~~返回当前结果，通过ref调用详见示列~~，版本>=0.1.3后被`移除`	~~function(e)~~	~~>= 0.1.1~~

change

状态发生改变时回调，接收一个参数，参数类型为Object，参数内容如下

data {Object} 选中结果集合
target {String} 是谁改变了
oldVal {string | string[] | null} 改变前的值
newVal {string | string[] | null} 改变后的值

vue

<template>
	<z-multistage @change="callbackChange"/>
</template>

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

const callbackChange = (e: IMtChange) => {
    console.log(e);
    /* 结果如下
    {
        data: {age: "10"}, // 结果集
        target: "age", // 是谁改变了
        oldVal: null, // target变动前的值
        newVal: "10", // target最新值
    }
    */
}
</script>

resetValue

用于重置所有状态

需要绑定ref之后，通过ref主动调用，调用后不会触发change事件，但会触发v-model的更新

vue

<template>
    <z-multistage ref="rMultistage"/>
    <button @click="reset">重置</button>
</template>

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

const rMultistage = ref<any>();
    
const reset = () => {
    rMultistage.value?.resetValue();
}
</script>

resetCustomCondition

用于修改或重置某一项或多项条件的状态

需要绑定ref之后，通过ref主动调用，调用后不会触发change事件，但会触发v-model的更新，同时返回一个与v-model同样的结果

接受参数类型：string | number | (string | number)[] | Array<{key: string | number, value: string | number} | string | number>

其中：string，number,string[], number[],用于重置状态，而Array<{key, value}>用于修改状态，key为唯一值来源于props-options-value，value为选中值

vue

<template>
    <z-multistage ref="rMultistage"/>
    <button @click="reset">重置</button>
</template>

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

const rMultistage = ref<any>();
    
const reset = () => {
    const a = rMultistage.value?.resetCustomCondition("age");
    console.log(a);
}
</script>

Multistage 条件筛选 ​

何时使用 ​

代码演示 ​

1. 默认效果 ​

2. 全局选中与多选 ​

3. 默认选中 ​

4. 多级联动 ​

5. 禁止选中 ​

API ​

props ​

props-options ​

参数演示 ​

props-isOpen ​

自定义插槽 ​

事件 ​

change ​

resetValue ​

resetCustomCondition ​

Multistage 条件筛选

何时使用

代码演示

1. 默认效果

2. 全局选中与多选

3. 默认选中

4. 多级联动

5. 禁止选中

API

props

props-options

参数演示

props-isOpen

自定义插槽

事件

change

resetValue

resetCustomCondition