vue-vben-admin 如何利用ApiSelect实现省市区三级联动选择

省市区三级联动选择

希望作者能提供省市区三级联动选择，在编辑功能里也能在当前的省市区里做选择。

问题

无。

预期功能

1.在新增功能里能实现联动选择。 2.在编辑功能里能在当前的省市区里选择，也可以切换其他的省市区。

替代方案

看了之前的#1266这个方案，并不能满足省市区编辑联动的功能。

Jan 25 '22 03:01 xmy1231

同样希望提供个原生的级联案例

Feb 07 '22 03:02 xiaoxiao113213

项目全局导入了ant-design-vue组件库，可以直接使用组件库的cascader组件，对应文档地址：https://next.antdv.com/components/cascader-cn

Feb 07 '22 07:02 wangxiaoer5200

@wangxiaoer5200 加载后台数据，貌似不能满足实际需求。

Feb 11 '22 14:02 xmy1231

使用 loadData 实现动态加载选项

Feb 16 '22 06:02 wangxiaoer5200

我这用ApiSelect实现了，可以参考下。

{
      field: 'province',
      component: 'ApiSelect',
      label: '省份',
      colProps: {
        span: 24,
      },
      required: true,
      componentProps: ({ formModel, formActionType }) => {
        return {
          api: getConstProvince,
          labelField: 'cName',
          valueField: 'id',
          immediate: false,
          onChange: (e: any) => {
            const { updateSchema } = formActionType;
            formModel.city = undefined;
            //加载城市
            updateSchema({
              field: 'city',
              componentProps: {
                api: getConstCity,
                labelField: 'cName',
                params: e,
                valueField: 'id',
                immediate: false,
                onChange: (e: any) => {
                  formModel.district = undefined;
                  const { updateSchema } = formActionType;
                  //加载地区
                  updateSchema({
                    field: 'district',
                    componentProps: {
                      api: getConstArea,
                      labelField: 'cName',
                      params: e,
                      valueField: 'id',
                      immediate: false,
                    },
                  });
                },
              },
            });
          },
        };
      },
    },
    {
      field: 'city',
      component: 'ApiSelect',
      label: '城市',
      colProps: {
        span: 24,
      },
      required: true,
    },
    {
      field: 'district',
      component: 'ApiSelect',
      label: '地区',
      required: true,
      colProps: {
        span: 24,
      },
    },

Sep 21 '22 06:09 wphubs

请问，上述示例中，显示时如何处理的？我这边显示是有问题的。

Nov 21 '22 16:11 seamusic

楼上@wphubs 的解决方案，试过了，不好使。我的解决方案是使用Select组件来解决，完美实现。下面是代码。供大家参考借鉴：

  {
    field: 'privince',
    label: '省',
    labelWidth: 80,
    component: 'ApiSelect',
    componentProps: ({ formModel, formActionType }) => {
      return {
        api: getProvinceAll,
        params: { tree: 0 },
        labelField: 'name',
        valueField: 'id',
        immediate: false,
        onChange: (e: any) => {
          console.log(e)
          // 联动生成 city 的数据
          formModel.city = undefined; //  reset city value
          const { updateSchema } = formActionType;
          getCityAll({privince: e}).then((res: CityItem[]) => {
            const list = res.map((i: CityItem) => {
                return {
                    label: i.name,
                    value: i.id,
                };
            });
            updateSchema({
              field: 'city',
              componentProps: ()=>{
                return {
                    options: list,
                }
              }
            });

          });
        },
      };
    },
    colProps: { span: 4 },
  },
  {
    field: 'city',
    label: '城市',
    labelWidth: 80,
    component: 'Select',
    colProps: { span: 3 },
  },

Oct 22 '23 17:10 wentmac

楼上@wphubs 的解决方案，试过了，不好使。我的解决方案是使用Select组件来解决，完美实现。下面是代码。供大家参考借鉴：

  {
    field: 'privince',
    label: '省',
    labelWidth: 80,
    component: 'ApiSelect',
    componentProps: ({ formModel, formActionType }) => {
      return {
        api: getProvinceAll,
        params: { tree: 0 },
        labelField: 'name',
        valueField: 'id',
        immediate: false,
        onChange: (e: any) => {
          console.log(e)
          // 联动生成 city 的数据
          formModel.city = undefined; //  reset city value
          const { updateSchema } = formActionType;
          getCityAll({privince: e}).then((res: CityItem[]) => {
            const list = res.map((i: CityItem) => {
                return {
                    label: i.name,
                    value: i.id,
                };
            });
            updateSchema({
              field: 'city',
              componentProps: ()=>{
                return {
                    options: list,
                }
              }
            });

          });
        },
      };
    },
    colProps: { span: 4 },
  },
  {
    field: 'city',
    label: '城市',
    labelWidth: 80,
    component: 'Select',
    colProps: { span: 3 },
  },

这种方式，在页面编辑打开的时候，城市 select列表还未加载，省的api select 也没有触发onchange,就显示了记录里面城市的id,这个有办法解决吗？

Nov 30 '23 03:11 ivorzhou

楼上@wphubs 的解决方案，试过了，不好使。我的解决方案是使用Select组件来解决，完美实现。下面是代码。供大家参考借鉴：

  {
    field: 'privince',
    label: '省',
    labelWidth: 80,
    component: 'ApiSelect',
    componentProps: ({ formModel, formActionType }) => {
      return {
        api: getProvinceAll,
        params: { tree: 0 },
        labelField: 'name',
        valueField: 'id',
        immediate: false,
        onChange: (e: any) => {
          console.log(e)
          // 联动生成 city 的数据
          formModel.city = undefined; //  reset city value
          const { updateSchema } = formActionType;
          getCityAll({privince: e}).then((res: CityItem[]) => {
            const list = res.map((i: CityItem) => {
                return {
                    label: i.name,
                    value: i.id,
                };
            });
            updateSchema({
              field: 'city',
              componentProps: ()=>{
                return {
                    options: list,
                }
              }
            });

          });
        },
      };
    },
    colProps: { span: 4 },
  },
  {
    field: 'city',
    label: '城市',
    labelWidth: 80,
    component: 'Select',
    colProps: { span: 3 },
  },

这种方式，在页面编辑打开的时候，城市 select列表还未加载，省的api select 也没有触发onchange,就显示了记录里面城市的id,这个有办法解决吗？

都这么麻烦了，有必要非得用vben的内置组件吗？直接slot用antd的原生select不好吗？