加油站小程序实战教程04类目级联选择

1 完善油号、油枪新增功能

在站点的操作列上，我们增加了油号和油枪的按钮，点击的时候传入站点的数据标识，可以过滤对应站点的油号和油枪列表。在二级板块点击新增的时候，我们通过弹窗来录入信息。

打开油号列表页面，点击页面组件，添加弹窗组件

在弹窗内容里添加表单容器组件

数据模型选择油号表，去掉不相关的关联关系字段

这里的所属站点，我们需要和页面的URL参数绑定，设置选中值，绑定我们的URL参数

表单容器的提交事件要增加，关闭弹窗、刷新表格的事件

之后设置弹窗组件，关闭底部按钮，关闭默认打开配置

设置新增按钮，将点击事件改为打开弹窗

按照同样的方法设置油枪的列表页面的新增功能，也是打开弹窗

2 配置级联选择

在维护站点信息时候，类目需要配置为级联选择。我们的数据源的字段类型我们配置成了文本，就需要先修改一下表单容器字段的类型，修改为下拉选择

服务大类的下拉单选，我们需要从变量里读取，在代码区创建一个内置表查询

变量添加好之后，给服务大类绑定选项

输入如下表达式

bash 复制代码

Array.from(
  new Map(
    $w.categoryList.data.records.map(item => [item.service_category, { 
      label: item.service_category, 
      value: item.service_category 
    }])
  ).values()
)

因为我们的配置表录入大类的时候会有重复，所以在封装好数据之后我们对其中的重复部分进行了去重操作

大类处理好之后，再添加一个内置表查询用来显示子类信息

添加一个变量用来存储大类选择的名称

在显示子类的时候要根据大类的选择情况，进行数据过滤，增加一个过滤条件

让我们的大类等于我们的名称

之后创建一个javascript方法用来触发我们变量的更新

输入如下代码

bash 复制代码

export default function({event, data}) {

   $w.page.dataset.state.categoryName = $w.select2.value
   $w.subCategory.trigger()

}

代码的意思是先从大类的选项里取值，赋值给我们的变量，然后将内置数据表查询重新触发一下

接着配置大类的值改变事件，调用我们的自定义方法

给子类绑定表达式

bash 复制代码

$w.subCategory.data.records.map(item=>({label:item.service_subcategory,value:item.service_subcategory}))

这样就完成了联动设置

总结

本篇我们优化了油号、油枪的新增功能，让录入数据更简便一些。同时修改了站点信息大类、小类的字段类型，增加了级联选择功能。这一块恐怕新手在配置的时候要稍微绕一点，主要需要理解级联的联动配置具体操作，包括从数据源中读取数据，增加过滤条件这些。

加油站小程序实战教程04类目级联选择

目录

1 完善油号、油枪新增功能

2 配置级联选择

总结