2.3 组件及区块介绍和常规使用原创

大家好，欢迎大家来到腾讯云开发者社区，腾讯云VR团队共同打造的VR第一代码平台，一人构建企业级应用实战训练营。第二章第三节我将为大家讲解组建以及区块的介绍和常规使用。我是腾讯云微拉团队产品经理薛成平。好，这里我们来到了可视化开发页面，这里给大家讲一下我们的组件的一些配置。首先当前这个页面我们现在已经把它指空了，它现在是没有组件的。一般情况下，我们可能会在这里放一个列表，所以我们可以先看一下我们的列表是怎么使用的。我们正常可能用的比较多的就是列表和表单，和一些常用的通用组件，这里我们可以先看一下列表的实现，我们这里有个数据表格字段，我们可以点它一下，它就给你加到了这个页面上，我们把这个数据表格放在这个布局内容下。

那么可以看到这个数据表格中间提示让你使用数据源生成表格，这是因为这些组件它是需要绑定一个数据模型的，或者你可以用其他的方式去绑定，但是你总归需要绑定一个数据源。这里我们先使用这个数据模型，这个数据模型我们就选择我们上节课创建的这个客户信息表。当我们选择这个数据模型之后，你会发现这个页面其实就已经有数据了，且把列都给你展示出来了。他展示的列其实就是我们刚才自己自己自定义的那3个字，那3个字段，它相当于就把我们自定义的字段给你展示出来了。然后还给我们加上了一个删除按钮的功能。我们可以往下看它的这个属性配置，下面有个数据筛选，这个数据筛选指的就是我们当前这个列表内的数据的一个默认筛选条件，它这个指的是默认筛选条件。

而不是我们在一般常见的页面上面会有一个输入框，让你去输入，然后点搜索。他这个初级筛选指的是默认筛选条件。我们这里可以给它配置成假设我们当前页面希望查询的是客户状态为正常的列表。那我们就可以在这儿选择这个数据筛选，当客户状态等于正常时。他就会筛选所有视为正常的，这里我们可以测试一下，我们去数据库这边。再新加一条数据。把它改为不正常。好，现在可以看到库里边其实是有2条数据的，这里我们回到可视化开发，我们先把这个条件给删除掉。

可以看到我们的页面其实是有2条数据的。这个时候我们再加上这个数据筛选。假设我们们认为。我们现在要查的数据是客户状态等于。正常的，你会发现它现在只有把正常的数据查出来了，所以它相当于是个内置查询条件，但如果说我们希望在上面加上那种查询框去做查询的话，它这个是叫做筛选器，我们可以在这里选中一些字段，比如说客户名称。手机号客户状态去做查询，那么它就会在上面生成这3个input框，我们就会在这里去填入数据。去做查询。然后再到下边就是它的列管理，我们可以说把在新加一些列，或者说调整调整这个列的位置，我们新加列的时候呢，也是可以不一定非要指定当前表单中的某一个字段，比如说我们有时候会把创建时间给放出来，这个时候它页面上就会有这个创建时间，有时候我们可能希望它有一个自定义的列，这个列它不一定是放这个数据。

它可能是放了一些按钮，或者说放其他的，或者把这个数据结构给改变一下。举个例子，这里的这个手机号，我们可能有的场景，希望是你在列表上点击这个手机号的时候，它就可以直接拨打电话，那么我们就可以来到手机号的这一列，我们把这个手机号的列的展示内容改为自定义内容。当我们把这个改成自定义内容之后，你会发现这个页面上的这个地方，它变成一个点击添加组件。发现我们的左侧的这个大纲数中，它会加一个自定义列的一个插槽出来，意思就是我们可以在这个插槽内放入任意的组件，这个组件之后就会放在这里去渲染。那么我们假设我们先放一个按钮，我们希望点这个按钮的时候，它能够去拨打当前的这个手机号。

那么这个按钮它肯定不是这个样式，我们希望它的内容就是它的手机号内，那我们这个内容就肯定不能写按钮两个字，它应该是动态的。因为它的每一行数据都不一样，你也不应该写死一个设备号，所以它怎么变成动态呢？像上节课我们讲过，我们可以通过表达式去获取到动态数据。当我把这个数据删除之后，他已经给我提示了这个record就是所在行的数据，我们可以点这个直接拿到所在行的数据，我要拿的是手机号，所以我就点手机号。你就可以发现他就把当前行的数据给你展示出来了。然后这里我们可以选择它的类型为文字。它展示的就是一个文字格式。所以我们最后可以通过这个按钮去执行打电话的操作，那么打电话的这个操作怎么配置呢？

也就是他的点击事件，我们希望点击它的时候进行打电话，那我们去找到他的点击事件，给他配置一个拨打电话。那么拨打电话的时候，它需要你填入手机号码，那一样的这个手机号码，他也应该就等于当前这个框里的数据，也就是这个数据，那我们一样的点这个FX，我们把这个空的删掉，对，发现他也跟我们提示了当前行的数据。那我们就选择它。然后手机放。这样子可我点保存。这时候你点它的时候，它就因为我是在电脑端，所以它会让我打开time去呃沟通。就是这么一个效果。可以看到当前这个组件它是没有新增功能的，但是它可以帮你把删除给加出来，因为新增一般不会在当前页面去做，新增它肯定是需要弹个窗或者说弹个新页面，而那些是不确定的，所以他就没有帮我们把那些给内置进来，但是删除功能一般在列表上都是会有的，所以这里它会把删除按钮给我们内置在这里，如果说我们不需要的话，我们去删掉就可以。比如说操作类，操作列的按钮在哪？就在这个位置，它有个操作列的插槽，当前数据表格它分为了哪几块，就是全局按钮、自定义列和操作列，而全局按钮指的就是这里。

可以看到全局按钮里边其实就有3个按钮，然后操作列下面就有1个按钮，对应的就是这个删除按钮。因为它提供的是插槽的方式，所以它里边不一定说只能放按钮，你可以放任意的东西，比如说这里我甚至都可以放一个文本进去，我把这个文本放在全局按钮的后边。我给他放了一个文本框，就是时候，如果说我可以把对这个文本框再做一些样式的调整，我可以把标题给去掉，它就成了一个文本框，我就可以。

自定义成任意的样子。这个它就是列表页面，那如果说我现在需要用到表单页面，我们现在需要手动的去加一下新增功能该怎么做？首先新增页面，它可能是一个新的页面，我们需要去做一个新的调整，但是这里我们不用做新的页面，我们换一种方式实现。比如说我们现在用弹窗的方式去实现一个新增页面，因为当前我们这个表的字段比较少，就不需要让它新增页面，我们可以拖入一个弹窗字段，但我们选择一个弹窗字段之后，它这里会有一个弹窗默认打开状态，它是默认打开的，一般情况下我们肯定不希望这个弹窗是默认打开的，所以我们就把它关上。然后呢，可以看到左侧竖这里它有个弹窗顶部顶部。我们可以先看一下它的结构啊，弹窗顶部其实指的就是这个位置，它右边会有这个关闭按钮，它左侧是它的弹窗标题，就弹窗标题这里它其实用的就是这个文本组件，这里我们可以把它内容改一下，比如说叫做新增。

客户。然后关闭按钮，我们不需要动，然后在这个弹窗内容中，我们主要就是把这个列表对应的这个数据源的表单给放在这里，那这个时候我们就应该用到一个表单容器组件，这里我们直接选择一个表单容器组件。选择表单容器组件之后呢，你会发现它这里要让你选择数据模型，这里我们就去选择一个数据模型，我们选择一样的这个数据模型，他会帮我们直接把这三个字段给展示出来。它自己会带有一个title，这个title如果说我们不需要的话，我们可以把它给删掉。那么现在它就是这对应的三个字段，它也会帮我们自动生成这么一个新增按钮，也就是提交按钮。所以这个提交按钮，它是会直接执行当前表单的提交事件。

这里我们可以看一下这个表单容器，这个表单容器这里会有个表单场景，指的是你当前页面是新增还是更新，还是查看，所以我们可以根据我们传进来的这个表单场景的不同，去确认你当前表单最后提交的时候是怎么提交，是新增提交还是更新提交，还是说只有查看。那选择数据模型之后，这里会有一个字段管理，也就是放置你当前页面的所有需要填的字段，也就是我们自定义的字段，那在辖它会有一个表单的展示方式。这里。还有它的标题位置，再下边就是它的事件，还有很多的事件，比如说提交事件，还有校验成功失败，还有查询成功失败的一个事件。对，我们相对可以在这里做配置，那么这个提交按钮，我们可以看到这个提交按钮它其实是表单容器内部的，所以。

当我们把这个。提交按钮的。属性，它的这个高级属性中有一个表单类型，指的就是你当前这个按钮是什么类型，如果说就是一个按钮的话，它就是按钮，如果说它是重置的话，它可能会重置当前表单的内容，如果说提交的话，它就会直接去触发。它会直接触发负极表单容器的提交事件，所以相当于表单的提交事件是由表单自己去考虑的，而我们的按钮是去触发这个表单的提交动作。相当于是这个样子。那么我们可以看一下表单的提交事件是什么样子的，我们去找到那个表单容器，我看一下它的这个提交事件，这里它自己默认就配上了这6个方法，我们可以打开看一下这6个方法是什么。

首先它第一步就是先禁用掉这个提交，这个禁用提交禁用的是谁的？就是这个组件FORM1表单容器的，也就是当前这个表单容器，FORM1指的是当前这个表单的ID，可以看到它右边会有个FORM1，在这里可以看到它的FORM1ID。它相当于执行的就是当前表单一个禁用，因为当我点击提交之后，我需要把当前表单先禁用提交，以防它多次点击，当我禁用掉之后呢，我就会调用数据源方法，也就是这张表的创建方法。我可以选择很多种，创建单条多条，修改单条多条，删除单条多条，查询单条多条，我可以执行这么多种方法。然后我填入这个入参，而这个入参是什么？就是当前这个表单的提交数据，这下边给我们展示出来的，它的结构就是这个样子。出餐指的是当前这个事件。

执行成功之后，它的返回值需不需要保存在某一个变量中？一般情况下我们是不需要保存的，所以这里我们就不做动作。我这里显示加载，我们可以打开。当我们调用这个接口成功之后呢，我们就可以把这个提交给打开了，就你可以再去提交了。然后我们才会显示一个消息提示提交成功，那如果说这个接口失败了，那我们还是给它启用提交，不过我们现在打开的弹窗就是提交失败，然后内容我们就会显示提交失败的内容。所以表单的提交事件就是这个样子。这里我们可以看一下其他的组件。比如说我们可以看一下。下拉组件还有人员组件，这里我们选择一下下拉组件，下拉单选。

这个下拉单选，我给它放在这个下方去。这个下拉单选，下拉单选这种字段，因为它涵盖的其实是那种跟单选多选都是一样的，它这个字段主要是在做什么，主要就是提供多个选项。做。单选或者多选这种的，那么这个字段它这里可以去录入选项内容，它也可以直接连接一个变量，这种方式，如果说我们连接变量的话，那这个。变量从哪里来？你可以直接从数据库来，你也可以从其他地方来，我们可以通过通过这种方式去拿到它的下拉数据。然后可以去做一些他的事情。那么其他的也是一样，比如说文本框或者什么的，我们都可以在这儿去做一些配置。我们可以看一下单行输入的字段。

如果是单输入的话，它可能就是一些比较简单的事件，比较简单的属性，比如说绑定哪个字段，还有它的字段内容，标题内容，还有输入值这种的，还有它的一些风格，大概就是这些。所以我们用的最多的话，可能还是在表单容器和数据表格容器上，这两个容器主要是相当于帮我们把一些简单字段直接生成出来了，不需要我们手动的去拖拽。这些。啊，组建和。一些区块的设计使用我们就讲到这里，下一节课我将给大家讲一下表达式的一些使用。