家在使用永洪BI做報(bào)表時(shí)，基本都會(huì)有數(shù)據(jù)篩選的場(chǎng)景。

永洪提供兩種類型的篩選器組件，一種是過濾組件，一種是參數(shù)組件，兩者都可對(duì)報(bào)表中數(shù)據(jù)進(jìn)行過濾，但是兩者有著一定的區(qū)別。

過濾組件綁定好數(shù)據(jù)就可對(duì)數(shù)據(jù)進(jìn)行篩選，而參數(shù)組件需要多一步添加過濾條件的操作方可對(duì)報(bào)表中數(shù)據(jù)進(jìn)行篩選，還有一個(gè)就是過濾組件只能作用于綁定相同數(shù)據(jù)集的組件，而參數(shù)組件則沒有這種硬性要求。

參數(shù)組件中的文本參數(shù)在我們使用的時(shí)候發(fā)現(xiàn)只能輸入一個(gè)值，然后基于這個(gè)值去做相應(yīng)的過濾，那么如何基于我們輸入的這一個(gè)值去做多個(gè)值的篩選呢？下面我們要介紹的就是如何使用文本參數(shù)進(jìn)行多值傳參篩選。

我們先看下面這種情況，可以看到廣東和上海都有相對(duì)應(yīng)的數(shù)據(jù)存在，但是我們要用文本參數(shù)同時(shí)篩選出兩個(gè)及以上省份數(shù)據(jù)的時(shí)候卻沒有數(shù)據(jù)。

下面的這種情況就是我們想要的效果：

以下是關(guān)于腳本及文本參數(shù)組件的一些簡(jiǎn)單介紹：

腳本

永洪提供了一個(gè)嵌入式的腳本環(huán)境，通過JavaScript的語言標(biāo)準(zhǔn)來支持，可以完全訪問組件的綁定，獲取組件的數(shù)據(jù)、屬性，以及數(shù)據(jù)的輸入，或其它（如日期、時(shí)間、區(qū)域、參數(shù)等），來動(dòng)態(tài)修改報(bào)告及組件的外觀和行為。腳本可以在報(bào)告初始化的時(shí)候執(zhí)行任務(wù)，也可以在改變報(bào)告時(shí)（如更改篩選條件）執(zhí)行任務(wù)從而實(shí)現(xiàn)報(bào)表的交互動(dòng)作。腳本語言簡(jiǎn)單且功能強(qiáng)大，需要較少的編程相關(guān)知識(shí)即可。

永洪腳本是永洪產(chǎn)品適用面較廣的功能，讓用戶可以自己定制化一些高級(jí)需求 , 幫助您應(yīng)對(duì)更復(fù)雜的業(yè)務(wù)場(chǎng)景。相關(guān)JS知識(shí)可上永洪官網(wǎng)幫助文檔（https://www.yonghongtech.com/help/Z-Suite/9.4/ch/）查看學(xué)習(xí)，深入學(xué)習(xí)可參閱JavaScript書籍或教程網(wǎng)站。

文本參數(shù)組件

文本參數(shù)組件是一個(gè)可輸入文本的控件。此組件只能輸入值，不能綁定數(shù)據(jù)選項(xiàng)。可接收的輸入文本是由定義的數(shù)據(jù)類型來決定。如果是日期類型，還可以有日歷控件來選擇日期。輸入完成，可用回車或者點(diǎn)擊空白處確認(rèn)輸入內(nèi)容，同時(shí)會(huì)根據(jù)數(shù)據(jù)類型去校驗(yàn)輸入的文本是否合法。

下面就為大家詳細(xì)介紹下整個(gè)的具體實(shí)現(xiàn)步驟：

1

先從右側(cè)組件庫中將文本參數(shù)組件和表格組件拖入到畫布中，給表格綁定上幾個(gè)數(shù)據(jù)字段，如下圖

2

在畫布的上方工具欄中找到報(bào)告-腳本，進(jìn)入之后在變化中運(yùn)行編輯處編輯相應(yīng)的處理腳本，對(duì)文本參數(shù)中的值進(jìn)行切分，相關(guān)腳本及操作如下：

var text = param["文本參數(shù)1"]

if(isNull(text)){

param["省份數(shù)組"] = ""

}else{

var arr = text.split(",")

param["省份數(shù)組"] = arr

}

腳本的意思即為獲取到文本參數(shù)1中輸入的值并賦值給變量text，然后對(duì)text的值進(jìn)行判斷，如果text的值為空的話，那么省份數(shù)組這個(gè)參數(shù)的值為空字符串；否則，對(duì)text的值按照指定的分隔符(這里的分隔符要和我們?cè)谖谋緟?shù)中輸入的分隔符保持一致)進(jìn)行拆分，然后將拆分得到的數(shù)組賦值給變量arr，再將變量arr賦值給省份數(shù)組參數(shù)。

3

在表格組件的篩選條件中添加和省份數(shù)組參數(shù)關(guān)聯(lián)的過濾條件。

4

預(yù)覽報(bào)告進(jìn)行驗(yàn)證測(cè)試，不輸入時(shí)表格中沒有數(shù)據(jù)，輸入廣東、上海、廣西時(shí)，出現(xiàn)三個(gè)省份相對(duì)應(yīng)的數(shù)據(jù)。

如上所述，就能夠?qū)崿F(xiàn)文本參數(shù)輸入值中多個(gè)數(shù)據(jù)的傳參篩選。

以上是本篇文章的全部?jī)?nèi)容，感謝閱讀！

ue路由傳參的兩種方式query和params

點(diǎn)擊打開視頻講解更加詳細(xì)

【面試題】Vue路由傳參的兩種方式query和params_嗶哩嗶哩_bilibili

、前言

前面寫了一篇react-router的簡(jiǎn)單應(yīng)用的文章，講的是如何實(shí)現(xiàn)網(wǎng)頁內(nèi)容切換跳轉(zhuǎn)的方法：

React 路由 react-router 入門實(shí)踐

本文新增跳轉(zhuǎn)的同時(shí)，攜帶傳參的處理方法

二、代碼

當(dāng)URL和Route匹配時(shí)，Route會(huì)創(chuàng)建一個(gè)match對(duì)象作為props中的一個(gè)屬性傳遞給被渲染的組件，里邊的params屬性便是路由跳轉(zhuǎn)攜帶的值。

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.路由規(guī)則傳參

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;

三、效果

可見，傳遞了參數(shù) product，并進(jìn)行頁面展示：

四、其他

我們也經(jīng)常通過js的方式，history.push進(jìn)行路由切換，而單通過 html