家在使用永洪BI做报表时，基本都会有数据筛选的场景。

永洪提供两种类型的筛选器组件，一种是过滤组件，一种是参数组件，两者都可对报表中数据进行过滤，但是两者有着一定的区别。

过滤组件绑定好数据就可对数据进行筛选，而参数组件需要多一步添加过滤条件的操作方可对报表中数据进行筛选，还有一个就是过滤组件只能作用于绑定相同数据集的组件，而参数组件则没有这种硬性要求。

参数组件中的文本参数在我们使用的时候发现只能输入一个值，然后基于这个值去做相应的过滤，那么如何基于我们输入的这一个值去做多个值的筛选呢？下面我们要介绍的就是如何使用文本参数进行多值传参筛选。

我们先看下面这种情况，可以看到广东和上海都有相对应的数据存在，但是我们要用文本参数同时筛选出两个及以上省份数据的时候却没有数据。

下面的这种情况就是我们想要的效果：

以下是关于脚本及文本参数组件的一些简单介绍：

脚本

永洪提供了一个嵌入式的脚本环境，通过JavaScript的语言标准来支持，可以完全访问组件的绑定，获取组件的数据、属性，以及数据的输入，或其它（如日期、时间、区域、参数等），来动态修改报告及组件的外观和行为。脚本可以在报告初始化的时候执行任务，也可以在改变报告时（如更改筛选条件）执行任务从而实现报表的交互动作。脚本语言简单且功能强大，需要较少的编程相关知识即可。

永洪脚本是永洪产品适用面较广的功能，让用户可以自己定制化一些高级需求 , 帮助您应对更复杂的业务场景。相关JS知识可上永洪官网帮助文档（https://www.yonghongtech.com/help/Z-Suite/9.4/ch/）查看学习，深入学习可参阅JavaScript书籍或教程网站。

文本参数组件

文本参数组件是一个可输入文本的控件。此组件只能输入值，不能绑定数据选项。可接收的输入文本是由定义的数据类型来决定。如果是日期类型，还可以有日历控件来选择日期。输入完成，可用回车或者点击空白处确认输入内容，同时会根据数据类型去校验输入的文本是否合法。

下面就为大家详细介绍下整个的具体实现步骤：

1

先从右侧组件库中将文本参数组件和表格组件拖入到画布中，给表格绑定上几个数据字段，如下图

2

在画布的上方工具栏中找到报告-脚本，进入之后在变化中运行编辑处编辑相应的处理脚本，对文本参数中的值进行切分，相关脚本及操作如下：

var text = param["文本参数1"]

if(isNull(text)){

param["省份数组"] = ""

}else{

var arr = text.split(",")

param["省份数组"] = arr

}

脚本的意思即为获取到文本参数1中输入的值并赋值给变量text，然后对text的值进行判断，如果text的值为空的话，那么省份数组这个参数的值为空字符串；否则，对text的值按照指定的分隔符(这里的分隔符要和我们在文本参数中输入的分隔符保持一致)进行拆分，然后将拆分得到的数组赋值给变量arr，再将变量arr赋值给省份数组参数。

3

在表格组件的筛选条件中添加和省份数组参数关联的过滤条件。

4

预览报告进行验证测试，不输入时表格中没有数据，输入广东、上海、广西时，出现三个省份相对应的数据。

如上所述，就能够实现文本参数输入值中多个数据的传参筛选。

以上是本篇文章的全部内容，感谢阅读！

ue路由传参的两种方式query和params

点击打开视频讲解更加详细

【面试题】Vue路由传参的两种方式query和params_哔哩哔哩_bilibili

、前言

前面写了一篇react-router的简单应用的文章，讲的是如何实现网页内容切换跳转的方法：

React 路由 react-router 入门实践

本文新增跳转的同时，携带传参的处理方法

二、代码

当URL和Route匹配时，Route会创建一个match对象作为props中的一个属性传递给被渲染的组件，里边的params属性便是路由跳转携带的值。

1.页面组件

Index.js

import React, { Component, Fragment } from 'react'

class import React, { Component, Fragment } from 'react'

class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        return (
            <Fragment>
                <h2>首页</h2>
            </Fragment>
        )
    }

}
export default Index;

 extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        return (
            <Fragment>
                <h2>首页</h2>
            </Fragment>
        )
    }

}
export default Index;

AmericaPage.js

import React, { Component, Fragment } from 'react'

class AmericaPage extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        return (
            <Fragment>
                <h2>美国{this.props.match.params.product}</h2>
            </Fragment>
        )
    }

}
export default AmericaPage;

ChinaPage.js

import React, { Component, Fragment } from 'react'

class ChinaPage extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        return (
            <Fragment>
                <h2>中国{this.props.match.params.product}</h2>
            </Fragment>
        )
    }

}

export default ChinaPage;

2.路由规则传参

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import AmericaPage from './pages/AmericaPage'
import ChinaPage from './pages/ChinaPage'
import Index from './pages/Index'

function AppRouter() {
    return (
        <Router>
            <ul>
                <li><Link to="/">首页</Link></li>
                <li><Link to="/america/apple">美国</Link></li>
                <li><Link to="/china/huawei">中国</Link></li>
            </ul>
            <Route path="/" exact component={Index} />
            <Route path="/america/:product" component={AmericaPage} />
            <Route path="/china/:product" component={ChinaPage} />
        </Router>
    );
}
export default AppRouter;

三、效果

可见，传递了参数 product，并进行页面展示：

四、其他

我们也经常通过js的方式，history.push进行路由切换，而单通过 html