整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

教程丨文本参数支持输入值中多个数据传参tips

家在使用永洪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

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

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

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

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>

<form action="/demo/demo_form.asp">

First name:<br>

<input type="text" name="Firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</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>

<input type="text" name="firstname">

<br>

Last name:<br>

<input type="text" name="lastname">

</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>

<form action="/demo/demo_form.asp">

First name:<br>

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</form>

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

</body>

</html>

运行结果：

2、<select>元素

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

<!DOCTYPE html>

<html>

<body>

<form action="/demo/demo_form.asp">

<select name="cars">

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

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

<br><br>

<input type="submit">

</form>

</body>

</html>

运行结果：

3、<fieldset>元素

<fieldset>元素组合表单中的相关数据

<legend>元素为<fieldset>元素定义标题，示例：

<!DOCTYPE html>

<html>

<body>

<form action="/demo/demo_form.asp">

<fieldset>

<legend>Personal information:</legend>

First name:<br>

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

<br><br>

<input type="submit" value="Submit">

</fieldset>

</form>

</body>

</html>

运行结果：

4、<textarea> 元素

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

<!DOCTYPE html>

<html>

<body>

<form>

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.

</textarea>

</form>

</body>

</html>

运行结果：

5、HTML5<datalist>元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

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

<!DOCTYPE html>

<html>

<body>

<form action="/demo/demo_form.asp">

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<input type="submit">

</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小时内与您取得联系。

推荐阅读
友情链接 天水 江汉区 青县 港口区 江华瑶族自治县 类乌齐县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服