教程丨文本參數支持輸入值中多個數據傳參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賦值給省份數組參數。

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

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

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

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

TML 表單用于搜集不同類型的用戶輸入。HTML5 Input，擁有多個新的表單輸入類型，提供了更好的輸入控制和驗證，今天將為大家帶來HTML中的表單及其input輸入類型。

一、HTML表單

1、HTML表單用于收集不同類型的用戶輸入，是一個包含表單元素的區域并且允許用戶在表單中輸入內容，比如文本域（textarea）、下拉列表、單選框（radio=buttons）、復選框（checkboxes）等。

2、表單使用標簽<form>來設置，示例：

運行結果：

二、HTML表單屬性：

1、HTML表單包含表單元素，表單元素是指不同類型的input元素、復選框、單選按鈕、提交按鈕等。

2、action屬性

在上面的示例中出現了action屬性，action屬性定義在提交表單執行的動作，向服務器提交表單的通常做法是使用提交按鈕。

通常，表單會被提交到web服務器上的網頁，上面的例子中，則指定了某個服務器腳本來處理被提交表單。

如果省略 action 屬性，則 action 會被設置為當前頁面。

3、method 屬性

method屬性規定在提交表單時所用的 HTTP 方法（GET 或 POST）：

如果表單提交是被動的（比如搜索引擎查詢），并且沒有敏感信息，使用get。

如果表單正在更新數據，或者包含敏感信息（例如密碼），使用post。

4、如果要正確地被提交，每個輸入字段必須設置一個 name 屬性，示例：

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

<p>如果您點擊提交，表單數據會被發送到名為 demo_form.asp 的頁面。</p>

<p>first name 不會被提交，因為此 input 元素沒有 name 屬性。</p>

</body>

</html>

運行結果：

5、target 屬性

target 屬性規定提交表單后在何處顯示響應，target 屬性可設置以下值之一：

默認值為 _self，這意味著響應將在當前窗口中打開。

6、Autocomplete 屬性

autocomplete 屬性規定表單是否應打開自動完成功能。

啟用自動完成功能后，瀏覽器會根據用戶之前輸入的值自動填寫值，示例：

運行結果：

7、所有<form>屬性的列表：

三、HTML表單元素：

1、<input>元素是最重要的表單元素，有很多的形態，根據不同的type屬性，例如：

①　文本輸入（text），示例：

<!DOCTYPE html>

<html>

<body>

<form>

First name:<br>

<br>

Last name:<br>

</form>

<p>請注意表單本身是不可見的。</p>

<p>同時請注意文本字段的默認寬度是 20 個字符。</p>

</body>

</html>

運行結果：

②　單選按鈕輸入（radio），示例：

<!DOCTYPE html>

<html>

<body>

<form>

<input type="radio" name="sex" value="male" checked>Male

<br>

<input type="radio" name="sex" value="female">Female

</form>

</body>

</html>

運行結果：

③　提交按鈕（submit），示例：

<!DOCTYPE html>

<html>

<body>

First name:<br>

<br>

Last name:<br>

</form>

<p>如果您點擊提交，表單數據會被發送到名為 demo_form.asp 的頁面。</p>

</body>

</html>

運行結果：

2、<select>元素

<select>元素定義下拉列表，示例：

<!DOCTYPE html>

<html>

<body>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

運行結果：

3、<fieldset>元素

<fieldset>元素組合表單中的相關數據

<legend>元素為<fieldset>元素定義標題，示例：

<!DOCTYPE html>

<html>

<body>

<legend>Personal information:</legend>

First name:<br>

<br>

Last name:<br>

</fieldset>

</form>

</body>

</html>

運行結果：

4、<textarea> 元素

<textarea> 元素定義多行輸入字段（文本域）、示例：

<!DOCTYPE html>

<html>

<body>

<form>

The cat was playing in the garden.

</textarea>

</form>

</body>

</html>

運行結果：

5、HTML5<datalist>元素

<datalist> 元素為 <input> 元素規定預定義選項列表。

用戶會在他們輸入數據時看到預定義選項的下拉列表。

<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性，示例：

<!DOCTYPE html>

<html>

<body>

</datalist>

</form>

</body>

</html>

運行結果：

四、HTML表單輸入類型

輸入類型	定義
text	定義供文本輸入的單行輸入字段
password	定義密碼字段
submit	定義提交表單數據至表單處理程序的按鈕
radio	定義單選按鈕
checkbox	定義復選框

<input>中的type：

類型	定義
radio	定義單選按鈕
checkbox	定義復選框
button	定義按鈕
number	用于應該包含數字值的輸入字段
date	用于應該包含日期的輸入字段
color	用于應該包含顏色的輸入字段
range	用于應該包含一定范圍內的值的輸入字段
month	允許用戶選擇月份和年份
week	允許用戶選擇周和年
time	允許用戶選擇時間（無時區）
datetime	允許用戶選擇日期和時間（有時區）
datetime-local	允許用戶選擇日期和時間（無時區）
email	用于應該包含電子郵件地址的輸入字段
search	用于搜索字段（搜索字段的表現類似常規文本字段）
tel	用于應該包含電話號碼的輸入字段
url	用于應該包含 URL 地址的輸入字段

輸入限制：

這就是有關HTML表單的大概內容了，希望這篇HTML的表單及其input輸入類型的知識點能對大家有所幫助。

Vue3.0中，事件處理用v-on指令，表單輸入綁定則用v-model指令。v-model指令在表單<input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。

9.1 文本輸入

在HTML標簽中，文本輸入有單行(text)和多行(textarea)輸入。溫馨提醒:v-model 會忽略所有表單元素的value的初始值而總是將當前活動實例的數據作為數據來源。你應該通過 JavaScript 該組件的 data 選項中聲明初始值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue3.0表單綁定</title>
    <script src="vue.global.js"></script>
</head>
<body>
<div id="app">
    <input v-model="msg" placeholder="單行輸入"/>
    <p>單行輸入結果: {{ msg }}</p>
    <hr style="background-color: #4CAF50;height: 1px"/>
    <textarea v-model="msg2" placeholder="多行輸入"></textarea>
    <p>多行輸入結果: {{ msg2 }}</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                msg: '',
                msg2: ''
            }
        }
    }).mount("#app")
</script>
</body>
</html>

輸出結果

9.2 單選和多選

在開發產品時，單選按鈕，用于多選一，在選擇性別時常見；單個復選框常在勾選協議中見到；在多個已知選項中，多選一時，可用select。

多個復選框，常在選擇個人興趣愛好等見到。復選框，單選時，綁定到布爾值，多選時，綁定到同一個數組。如果要選擇項很多，那可用多選下拉菜單，以節約布局空間。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue3.0表單綁定</title>
    <script src="vue.global.js"></script>
</head>
<body>
<div id="app">
    快來，選擇你喜歡的編程語言
    <div>
        <input type="checkbox" id="Python" value="Python" v-model="likes"/>
        <label for="Python">Python</label>
        <input type="checkbox" id="Java" value="Java" v-model="likes"/>
        <label for="Java">John</label>
        <input type="checkbox" id="web" value="前端" v-model="likes"/>
        <label for="web">前端</label>
        <br/>
        <span>你選擇的語言: {{ likes.length > 0 ? likes : '' }}</span>
    </div>
    <div>
        <input type="radio" id="boy" value="程序猿" v-model="gender"/>
        <label for="boy">程序猿</label>
        <br/>
        <input type="radio" id="girl" value="程序媛" v-model="gender"/>
        <label for="girl">程序媛</label>
        <br/>
        <input type="radio" id="no" value="不男不女" v-model="gender"/>
        <label for="no">不男不女</label>
        <br/>
        <span>你是: {{ gender }}</span>
    </div>
    <div>
        <select v-model="selected">
            <option disabled value="">你愛帥哥還是美女</option>
            <option>帥哥</option>
            <option>美女</option>
        </select>
        <br/>
        <span>你愛: {{ selected }}</span>
    </div>
    <div> 你確定就勾選：<input type="checkbox" id="checkbox" v-model="agree"/>
      </div>
    <br/>
    <div>
        <button @keyup.enter="submit" type="submit" @click="submit">
          提交</button>
    </div>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                likes: [],
                gender: '',
                selected: '',
                agree: false
            }
        },
        methods: {
            submit() {
                if (this.likes.length == 0) {
                    alert('你沒有選擇喜歡的編程語言.')
                } else if (this.gender == '') {
                    alert('性別選擇一下，又會怎么樣呢?')
                } else if (this.selected == '') {
                    alert('沒有選擇你所愛的.')
                } else if (this.agree == false) {
                    alert('勾選協議，才可以提交.')
                } else {
                    alert('恭喜你，數據提交成功!')
                }
            }
        }
    }).mount("#app")
</script>
</body>
</html>

輸出結果

好了，有關Vue3.0表單輸入的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。我在分享Python，前端、Java和App方面的干貨。關注我，沒錯的。

#前端##Vue.js##JavaScript##程序員##Web#

在線咨詢

上一篇：Dust Generator-逼真粒子粉塵漂浮生成器Blender插件
下一篇：「圖」微軟推薦EdgeHTML風格滾動特性：讓Chrome滾動更流暢

您的項目需求

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

整合營銷服務商

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

9.1 文本輸入

9.2 單選和多選

您的項目需求