教程丨文本參數支持輸入值中多個數據傳參tips

家在使用永洪BI做報表時，基本都會有數據篩選的場景。

永洪提供兩種類型的篩選器組件，一種是過濾組件，一種是參數組件，兩者都可對報表中數據進行過濾，但是兩者有著一定的區別。

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

參數組件中的文本參數在我們使用的時候發現只能輸入一個值，然后基于這個值去做相應的過濾，那么如何基于我們輸入的這一個值去做多個值的篩選呢？下面我們要介紹的就是如何使用文本參數進行多值傳參篩選。

我們先看下面這種情況，可以看到廣東和上海都有相對應的數據存在，但是我們要用文本參數同時篩選出兩個及以上省份數據的時候卻沒有數據。

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

以下是關于腳本及文本參數組件的一些簡單介紹：

腳本

永洪提供了一個嵌入式的腳本環境，通過JavaScript的語言標準來支持，可以完全訪問組件的綁定，獲取組件的數據、屬性，以及數據的輸入，或其它（如日期、時間、區域、參數等），來動態修改報告及組件的外觀和行為。腳本可以在報告初始化的時候執行任務，也可以在改變報告時（如更改篩選條件）執行任務從而實現報表的交互動作。腳本語言簡單且功能強大，需要較少的編程相關知識即可。

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

文本參數組件

文本參數組件是一個可輸入文本的控件。此組件只能輸入值，不能綁定數據選項。可接收的輸入文本是由定義的數據類型來決定。如果是日期類型，還可以有日歷控件來選擇日期。輸入完成，可用回車或者點擊空白處確認輸入內容，同時會根據數據類型去校驗輸入的文本是否合法。

下面就為大家詳細介紹下整個的具體實現步驟：

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

在畫布的上方工具欄中找到報告-腳本，進入之后在變化中運行編輯處編輯相應的處理腳本，對文本參數中的值進行切分，相關腳本及操作如下：

var text = param["文本參數1"]

if(isNull(text)){

param["省份數組"] = ""

}else{

var arr = text.split(",")

param["省份數組"] = arr

}

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

在表格組件的篩選條件中添加和省份數組參數關聯的過濾條件。

預覽報告進行驗證測試，不輸入時表格中沒有數據，輸入廣東、上海、廣西時，出現三個省份相對應的數據。

如上所述，就能夠實現文本參數輸入值中多個數據的傳參篩選。

以上是本篇文章的全部內容，感謝閱讀！

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

在線咨詢

上一篇：個人網站-配置https
下一篇：前端開發：極簡的CSS 框架

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。