uniapp实现筛选功能

Question

uniapp如何实现二级筛选功能 类似美团或者是大众点评功能 求解答 谢谢

Answer 1

1.安装uni-ui组件库
在uniapp的项目中安装uni-ui组件库，可以使用npm或者yarn进行安装。在命令行中输入以下命令：

npm install @dcloudio/uni-ui

或者

yarn add @dcloudio/uni-ui

2.引入级联选择器组件
在需要使用级联选择器的页面中，引入级联选择器组件。例如，在pages/index/index.vue中引入级联选择器组件：

<template>
  <view>
    <uni-cascade-picker :cascade-data="cascadeData" @change="onChange"></uni-cascade-picker>
  </view>
</template>

<script>
import uniCascadePicker from '@/uni-ui/uni-cascade-picker/uni-cascade-picker.vue';

export default {
  components: {
    uniCascadePicker
  },
  data() {
    return {
      cascadeData: [
        {
          value: '1',
          label: '选项1',
          children: [
            {
              value: '1-1',
              label: '选项1-1'
            },
            {
              value: '1-2',
              label: '选项1-2'
            }
          ]
        },
        {
          value: '2',
          label: '选项2',
          children: [
            {
              value: '2-1',
              label: '选项2-1'
            },
            {
              value: '2-2',
              label: '选项2-2'
            }
          ]
        }
      ],
      selectedValue: []
    }
  },
  methods: {
    onChange(e) {
      console.log(e);
    }
  }
}