uniapp省市区选择 支持微信小程序 支持回显 支持一列两列三列

1. 用法 回显 :defaultIds="[755684, 1415686, 2142999]" 初始 :defaultIds="[]"

 <template>
  <view class="content">
    <selfPicker
      level="3"
      :defaultIds="[755684, 1415686, 2142999]"
      :getIds="getIds"
      idKey="areaId"
      name="areaName"
      children="children"
      :columnData="data"
    ></selfPicker>
  </view>
</template>

<script>
import { data } from "./index";
export default {
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    setTimeout(() => {
    // 数据格式
      // [
      //   {
      //     areaId: 752254,
      //     areaName: "北京市",
      //     children: [
      //       {
      //         areaId: 752252,
      //         areaName: "北京市",
      //         children: [
      //           {
      //             areaId: 752260,
      //             areaName: "顺义区",
      //             parentId: 752252,
      //           },
      //           {
      //             areaId: 752262,
      //             areaName: "昌平区",
      //             parentId: 752252,
      //           },
      //         ],
      //       },
      //     ],
      //   },
      // ];
      this.data = Object.freeze(data);
    }, 300);
  },
  methods: {
    getIds(value) {
      console.log(value, "111111111111");
    },
  },
};
</script>

组件封装

<template>
  <picker
    :mode="mode"
    @columnchange="columnchange"
    @change="change"
    :range="pickerRange"
    :value="selectItem.value"
    :range-key="name"
  >
    {{ selectItem.name || "请选择" }}
  </picker>
</template>

<script>
export default {
  props: {
    level: {
      type: [String, Number],
      default: 1,
    },
    defaultIds: {
      type: Array,
      default: [],
    },
    getIds: {
      type: Function,
      default: () => {},
    },
    columnData: {
      type: Array,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
    idKey: {
      type: String,
      required: true,
    },
    children: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      mode: "multiSelector", // 默认多列
      pickerRange: undefined,
      selectItem: { value: "", name: "" },
      areaData: [],
    };
  },
  watch: {
    columnData(newData) {
      this.$nextTick(this.dealData(newData));
    },
  },
  methods: {
    // 1:一列选择器  2：两列选择器  3：三列选择器
    dealData(newData) {
      this.areaData = Object.freeze(newData);
      let result = "";
      switch (+this.level) {
        case 1:
          this.mode = "selector"; // 普通单列选择器
          result = this.areaData.map((item, index) => {
            if (+item[this.idKey] === +this.defaultIds[0]) {
              this.$set(this.selectItem, "value", index);
              this.$set(this.selectItem, "name", item[this.name]);
            }
            return {
              [this.idKey]: item[this.idKey],
              [this.name]: item[this.name],
            };
          });
          this.pickerRange = Object.freeze(result);
          break;
        case 2:
        case 3:
          this.mode = "multiSelector"; // 默认多列
          this.pickerRange = [];
          this.$set(this.selectItem, "value", []);
          for (let i = 0; i < +this.level; i++) {
            this.pickerRange.push([]);
          }
          result = this.areaData.map((item, index) => {
            if (+item[this.idKey] === +this.defaultIds[0]) {
              this.$set(
                this.pickerRange,
                1,
                Object.freeze(item?.[this.children] ?? [])
              );
              this.$set(this.selectItem, "value", [
                ...this.selectItem.value,
                index,
              ]);
              this.$set(
                this.selectItem,
                "name",
                this.selectItem.name + `${item[this.name]}`
              );
              this.pickerRange[1].forEach((item, index) => {
                if (+item[this.idKey] === +this.defaultIds[1]) {
                  if (+this.level === 3) {
                    this.$set(
                      this.pickerRange,
                      2,
                      Object.freeze(item?.[this.children] ?? [])
                    );

                    this.pickerRange[2].forEach((item, index) => {
                      if (+item[this.idKey] === +this.defaultIds[2]) {
                        this.$set(this.selectItem, "value", [
                          ...this.selectItem.value,
                          index,
                        ]);
                        this.$set(
                          this.selectItem,
                          "name",
                          this.selectItem.name + `--${item[this.name]}`
                        );
                      }
                    });
                  }

                  this.$set(this.selectItem, "value", [
                    ...this.selectItem.value,
                    index,
                  ]);
                  this.$set(
                    this.selectItem,
                    "name",
                    this.selectItem.name + `--${item[this.name]}`
                  );
                }
              });
            }
            return {
              [this.idKey]: item[this.idKey],
              [this.name]: item[this.name],
              [this.children]: item[this.children],
            };
          });
          this.pickerRange[0] = Object.freeze(result);
          if (this.pickerRange[1].length <= 0) {
            this.$set(
              this.pickerRange,
              1,
              Object.freeze(this.pickerRange[0][0][this.children])
            );
          }
          if (+this.level === 3 && this.pickerRange[2].length <= 0) {
            this.$set(
              this.pickerRange,
              2,
              Object.freeze(this.pickerRange[1][0][this.children])
            );
          }
          break;
      }
    },
    columnchange(event) {
      const { column, value } = event.detail;
      switch (+column) {
        case 0:
          if (+this.level === 2) {
            this.$set(
              this.pickerRange,
              1,
              Object.freeze(
                this.pickerRange[column][value]?.[this.children] ?? []
              )
            );
            this.selectItem.value = [value, 0];
          }
          if (+this.level === 3) {
            this.$set(
              this.pickerRange,
              1,
              Object.freeze(
                this.pickerRange[column][value]?.[this.children] ?? []
              )
            );
            this.$set(
              this.pickerRange,
              2,
              Object.freeze(this.pickerRange[1][0]?.[this.children] ?? [])
            );
            this.selectItem.value = [value, 0, 0];
          }

          break;
        case 1:
          if (+this.level === 3) {
            this.$set(
              this.pickerRange,
              2,
              Object.freeze(
                this.pickerRange[column][value]?.[this.children] ?? []
              )
            );
            this.selectItem.value[2] = 0;
          }
          break;
      }
    },
    change(e) {
      const { value } = e.detail;
      if (typeof value === "number") {
        this.getIds([this.pickerRange[value]?.[this.idKey]]);

        this.$set(
          this.selectItem,
          "name",
          this.pickerRange[value]?.[this.name]
        );
        return;
      }
      let arr = [],
        name = "";
      value.forEach((item, index) => {
        arr.push(this.pickerRange[index][item]?.[this.idKey]);
        if (name) {
          name += `--${this.pickerRange[index][item]?.[this.name]}`;
        } else {
          name += `${this.pickerRange[index][item]?.[this.name]}`;
        }
      });
      this.$set(this.selectItem, "name", name);
      this.getIds(arr);
    },
  },
};
</script>

<style></style>