Cascader 级联选择

介绍

级联选择框，用于多层级数据的选择，典型场景为省市区选择。

引入

import { createApp } from 'vue';
import { Cascader } from 'vant';
const app = createApp();
app.use(Cascader);

代码演示

基础用法

级联选择组件可以搭配 Field 和 Popup 组件使用，示例如下：

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

import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      show: false,
      fieldValue: '',
      cascaderValue: '',
    });
    // 选项列表，children 代表子选项，支持多级嵌套
    const options = [
      {
        text: '浙江省',
        value: '330000',
        children: [{ text: '杭州市', value: '330100' }],
      },
      {
        text: '江苏省',
        value: '320000',
        children: [{ text: '南京市', value: '320100' }],
      },
    ];
    // 全部选项选择完毕后，会触发 finish 事件
    const onFinish = ({ selectedOptions }) => {
      state.show = false;
      state.fieldValue = selectedOptions.map((option) => option.text).join('/');
    };
    return {
      state,
      options,
      onFinish,
    };
  },
};

自定义颜色

通过 active-color 属性来设置选中状态的高亮颜色。

<van-cascader
  v-model="state.cascaderValue"
  title="请选择所在地区"
  :options="options"
  active-color="#1989fa"
  @close="state.show = false"
  @finish="onFinish"
/>

异步加载选项

可以监听 change 事件并动态设置 options，实现异步加载选项。

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

import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      show: false,
      fieldValue: '',
      cascaderValue: '',
      options: [
        {
          text: '浙江省',
          value: '330000',
          children: [],
        },
      ],
    });
    const onChange = ({ value }) => {
      if (value === state.options[0].value) {
        setTimeout(() => {
          state.options[0].children = [
            { text: '杭州市', value: '330100' },
            { text: '宁波市', value: '330200' },
          ];
        }, 500);
      }
    };
    const onFinish = ({ selectedOptions }) => {
      state.show = false;
      state.fieldValue = selectedOptions.map((option) => option.text).join('/');
    };
    return {
      state,
      onChange,
      onFinish,
    };
  },
};

API

Props

Events

Slots

样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考主题定制。