Cascader 级联选择

引入

通过以下方式来全局注册组件，更多注册方式请参考。

基础用法

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

  2.   v-model="fieldValue"
  3.   is-link
  4.   readonly
  5.   label="地区"
  6.   placeholder="请选择所在地区"
  7.   @click="show = true"
  8. />
  9. <van-popup v-model:show="show" round position="bottom">
  10.   <van-cascader
  11.     v-model="cascaderValue"
  12.     title="请选择所在地区"
  13.     :options="options"
  14.     @close="show = false"
  15.     @finish="onFinish"
  16.   />
  17. </van-popup>
  1. import { ref } from 'vue';
  3. export default {
  4.   setup() {
  5.     const show = ref(false);
  6.     const fieldValue = ref('');
  7.     const cascaderValue = ref('');
  8.     // 选项列表，children 代表子选项，支持多级嵌套
  9.     const options = [
  10.       {
  11.         text: '浙江省',
  12.         value: '330000',
  13.         children: [{ text: '杭州市', value: '330100' }],
  14.       },
  15.       {
  16.         text: '江苏省',
  17.         value: '320000',
  18.         children: [{ text: '南京市', value: '320100' }],
  19.       },
  20.     ];
  21.     // 全部选项选择完毕后，会触发 finish 事件
  22.       show.value = false;
  23.       fieldValue.value = selectedOptions.map((option) => option.text).join('/');
  24.     };
  26.     return {
  27.       show,
  28.       options,
  29.       onFinish,
  30.       fieldValue,
  31.       cascaderValue,
  32.     };
  33.   },
  34. };

自定义颜色

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

  1. <van-field
  2.   v-model="fieldValue"
  3.   is-link
  5.   label="地区"
  6.   placeholder="请选择所在地区"
  7.   @click="show = true"
  8. />
  9. <van-popup v-model:show="show" round position="bottom">
  10.   <van-cascader
  11.     v-model="cascaderValue"
  12.     title="请选择所在地区"
  13.     :options="options"
  14.     @close="show = false"
  15.     @change="onChange"
  16.     @finish="onFinish"
  17.   />
  18. </van-popup>
  1. import { ref } from 'vue';
  3. export default {
  4.   setup() {
  5.     const show = ref(false);
  6.     const fieldValue = ref('');
  7.     const cascaderValue = ref('');
  8.     const options = ref([
  9.       {
  10.         text: '浙江省',
  11.         value: '330000',
  12.         children: [],
  13.       },
  14.     ]);
  15.     const onChange = ({ value }) => {
  16.       if (value === options.value[0].value) {
  17.         setTimeout(() => {
  18.           options.value[0].children = [
  19.             { text: '杭州市', value: '330100' },
  20.             { text: '宁波市', value: '330200' },
  21.           ];
  22.         }, 500);
  23.       }
  24.     const onFinish = ({ selectedOptions }) => {
  25.       show.value = false;
  26.       fieldValue.value = selectedOptions.map((option) => option.text).join('/');
  27.     };
  29.     return {
  30.       show,
  31.       options,
  32.       onFinish,
  33.       fieldValue,
  34.       cascaderValue,
  35.     };
  36.   },
  37. };

自定义字段名

通过 field-names 属性可以自定义 options 里的字段名称。

  1. import { ref } from 'vue';
  3. export default {
  5.     const code = ref('');
  6.     const fieldNames = {
  7.       text: 'name',
  8.       value: 'code',
  9.       children: 'items',
  10.     };
  11.     const options = [
  12.       {
  13.         name: '浙江省',
  14.         code: '330000',
  15.         items: [{ name: '杭州市', code: '330100' }],
  16.       },
  17.       {
  18.         name: '江苏省',
  19.         code: '320000',
  20.         items: [{ name: '南京市', code: '320100' }],
  21.       },
  22.     ];
  24.     return {
  25.       code,
  26.       options,
  27.       fieldNames,
  28.     };
  29.   },
  30. };

自定义选项上方内容

  1. <van-cascader v-model="code" title="请选择所在地区" :options="options">
  2.   <template #options-top="{ tabIndex }">
  3.     <div class="current-level">当前为第 {{ tabIndex }} 级</div>
  4.   </template>
  5. </van-cascader>
  7. <style>
  8.   .current-level {
  9.     padding: 10px 16px 0;
  10.   }

Props

Events

Slots

类型定义

组件导出以下类型定义：

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