---

效果

index.vue页面

template内容

  <van-form @submit="onSubmit">
          <van-cell-group inset>
            <van-field
              v-model="providerApply.companyName"
              name="企业名称"
              label="企业名称"
              placeholder="请输入"
              :rules="[{ required: true, message: '请填写企业名称' }]"
            />
            <van-field
              v-model="fieldValue"
              is-link
              readonly
              label="所在地区"
              placeholder="点击选择"
              @click="handerAddress"
              :rules="[{ required: true, message: '请选择所在地区' }]"
            />
            <van-popup v-model:show="show" round position="bottom">
              <van-cascader
                v-model="cascaderValue"
                title="请选择所在地区"
                :options="addressList"
                @close="handerAddress"
                @change="clickOption"
                :field-names="fieldNames"
              />
            </van-popup>
          </van-cell-group>
          <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>

script内容

import { ref, onMounted, reactive, toRefs, onBeforeUpdate } from "vue";
import {
  getFileList,
  postFindProvinces,
  getSelectByParentId,
} from "../../api/index";
import { InitData } from "../../utils/settlein";

export default {
  setup() {
    let dataPage = reactive(new InitData());
    const data = reactive({
      showCompanyType: false,
    });
    // 地区下拉展示
    const show = ref(false);
    const fieldValue = ref("");
    const cascaderValue = ref("");

    const onSubmit = (values: any) => {
      console.log("submit", dataPage.providerApply, values);
    };
    onBeforeUpdate(() => {
      checkboxRefs.value = [];
    });
    // 所在地区选项列表，children 代表子选项，支持多级嵌套
    const fieldNames = {
      text: "name",
      value: "code",
      children: "items",
    };
    // 选择地区
    const clickOption = ({ selectedOptions }: any) => {
      if (selectedOptions[selectedOptions.length - 1].level != 5) {
        // 查询指定parentId的下级行政区域
        getSelectByParentId({
          parentId: selectedOptions[selectedOptions.length - 1].regionId,
        }).then((res: any) => {
          selectedOptions[selectedOptions.length - 1].items = res.resultData;
        });
      } else {
        // 关闭页面
        show.value = false;
        dataPage.providerApply.provinceId = selectedOptions[0].regionId;
        dataPage.providerApply.cityId = selectedOptions[1].regionId;
        dataPage.providerApply.countyId = selectedOptions[2].regionId;
        dataPage.providerApply.townId = selectedOptions[3].regionId;
        // 页面值
        fieldValue.value = selectedOptions
          .map((option: any) => option.name)
          .join("/");
      }
    };
    // 省份
    const provinces = () => {
      postFindProvinces().then((res: any) => {
        dataPage.addressList = res.resultData;
      });
    };
    // 所在地区
    const handerAddress = () => {
      show.value = true;
    };
    onMounted(() => {
      provinces();
    });

    return {
      // companyName,
      ...toRefs(data),
      ...toRefs(dataPage),
      onSubmit,
      onConfirm,
      handerPicker,
      show,
      clickOption,
      fieldValue,
      cascaderValue,
      handerAddress,
      fieldNames,
      provinces,
      onConfirmCompanyType,
    };
  },
};
</script>

index.ts页面

export interface addressListInt {
    name: string,
    code: string,
    items: itemsInt[],
}
interface itemsInt {
    name: string,
    code: string,
}
interface providerApplyInt {
    companyName: string, //公司名称
    companyType: string, //公司类型
}
export class InitData {
    providerApply: providerApplyInt = {
        companyName: "", //公司名称
        companyType: "", //公司类型
    }
    addressList: addressListInt[] = []
}