Cascader 级联选择

引入

基础用法

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

  2.   v-model="state.fieldValue"
  3.   is-link
  4.   readonly
  5.   label="地区"
  6.   placeholder="请选择所在地区"
  7.   @click="state.show = true"
  8. />
  9. <van-popup v-model:show="state.show" round position="bottom">
  10.   <van-cascader
  11.     v-model="state.cascaderValue"
  12.     title="请选择所在地区"
  13.     :options="options"
  14.     @finish="onFinish"
  15.   />
  16. </van-popup>
  1. <van-cascader
  2.   v-model="state.cascaderValue"
  3.   title="请选择所在地区"
  4.   :options="options"
  5.   active-color="#1989fa"
  6.   @close="state.show = false"
  7.   @finish="onFinish"
  8. />

异步加载选项

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

  3. export default {
  4.   setup() {
  5.     const state = reactive({
  6.       show: false,
  7.       fieldValue: '',
  8.       cascaderValue: '',
  9.       options: [
  10.         {
  11.           text: '浙江省',
  12.           value: '330000',
  13.           children: [],
  14.       ],
  15.     });
  16.     const onChange = ({ value }) => {
  17.       if (value === state.options[0].value) {
  18.         setTimeout(() => {
  19.           state.options[0].children = [
  20.             { text: '杭州市', value: '330100' },
  21.             { text: '宁波市', value: '330200' },
  22.           ];
  23.         }, 500);
  24.       }
  25.     };
  26.     const onFinish = ({ selectedOptions }) => {
  27.       state.show = false;
  29.     };
  31.     return {
  32.       state,
  33.       onChange,
  34.       onFinish,
  35.     };
  36.   },
  37. };

API

Props

Slots

样式变量