vue移动端项目vant组件库之cascader级联选择

vue vant 级联选择

<template>
  <div>
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="地区"
      placeholder="请选择所在地区"
      @click="show = true"
    />
    <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
  </div>
</template>

<script>
import {
    
     Cascader, Popup, Field } from "vant";
export default {
    
    
  components: {
    
    
    vanCascader: Cascader,
    vanPopup: Popup,
    vanField: Field,
  },
  data() {
    
    
    return {
    
    
      show: false,
      fieldValue: "",
      cascaderValue: "",
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
    
    
          text: "广东省",
          value: "1",
          children: [
            {
    
     
                text: "深圳市", 
                value: "101",  
                children: [
                    {
    
     text: "南山区", value: "10101" },
                    {
    
     text: "宝安区", value: "10102" },
                    {
    
     text: "龙华区", value: "10103" },
                    {
    
     text: "福田区", value: "10104" },
                ]
            },
            {
    
     text: "广州市", value: "102" },
            {
    
     text: "珠海市", value: "103" },
          ],
        },
        {
    
    
          text: "广西壮族自治区",
          value: "2",
          children: [
            {
    
     text: "南宁市", value: "201" },
            {
    
     text: "北海市", value: "202" },
            {
    
     text: "桂林市", value: "203" },
          ],
        },
      ],
    };
  },
  methods: {
    
    
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({
    
     selectedOptions }) {
    
    
      // 没有 children 时触发
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

效果

没有子项时自动完成

在 onFinish 回调中处理相应逻辑