如何在 Select 组件中添加分组？

Question

我想在 Select 组件中显示一些选项并进行分组展示，比如水果和蔬菜两个类别，然后分别展示其对应的选项。不知道怎么实现分组展示，有朋友知道怎么做吗？能否提供一个代码示例？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

可以通过添加分组字段到数据结构中并进行渲染时的条件判断来实现选项的分组展示。

export default {
  data: {
    options: [
      { group: '水果', items: ['苹果', '香蕉', '橙子'] },
      { group: '蔬菜', items: ['西红柿', '黄瓜', '生菜'] }
    ]
  }
}

<List>
  <ListItem for="{{option in options}}" key="{{option.group}}">
    <Text>{{option.group}}</Text>
    <Select range="{{option.items}}"></Select>
  </ListItem>
</List>

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。