vue 级联选择器 三级 手机端

对于手机端，可以考虑使用 `mint-ui` 组件库来实现级联选择器。`mint-ui` 是饿了么团队开发的基于 Vue.js 的移动端 UI 组件库，支持常用的移动端组件，包括级联选择器。

以下是一个简单的三级级联选择器的实现：

1. 安装 `mint-ui` 组件库：

npm install mint-ui --save

2. 在 Vue 项目的入口文件中引入 `mint-ui` 组件和样式：

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

3. 在你的 Vue 组件中使用 `mt-picker` 组件渲染级联选择器：

<template>
  <mt-picker :data="data" v-model="selected" @change="handleChange"></mt-picker>
</template>

<script>
export default {
  data() {
    return {
      selected: [],
      data: [
        {
          value: 'province1',
          label: '省份1',
          children: [
            {
              value: 'city1',
              label: '城市1',
              children: [
                {
                  value: 'district1',
                  label: '区域1'
                },
                {
                  value: 'district2',
                  label: '区域2'
                }
              ]
            },
            {
              value: 'city2',
              label: '城市2',
              children: [
                {
                  value: 'district3',
                  label: '区域3'
                },
                {
                  value: 'district4',
                  label: '区域4'
                }
              ]
            }
          ]
        },
        {
          value: 'province2',
          label: '省份2',
          children: [
            {
              value: 'city3',
              label: '城市3',
              children: [
                {
                  value: 'district5',
                  label: '区域5'
                },
                {
                  value: 'district6',
                  label: '区域6'
                }
              ]
            },
            {
              value: 'city4',
              label: '城市4',
              children: [
                {
                  value: 'district7',
                  label: '区域7'
                },
                {
                  value: 'district8',
                  label: '区域8'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleChange(selectedValues) {
      console.log(selectedValues)
    }
  }
}
</script>

以上就是一个简单的移动端 Vue.js 级联选择器三级的实现，主要使用了 `mt-picker` 组件，通过传入 `data` 参数，实现了三级的级联选择器。需要注意的是，`data` 参数中的数据结构需要按照组件要求的格式进行定义。同时，为了适应移动端的操作，可以考虑使用 `popup` 或者 `picker` 组件来展示级联选择器。