表单

城市级联

1. 数据来源：外链
2. 应用：

<template>
<el-form>
        <el-form-item>
          <el-input
            placeholder="市-区 街道"
            v-model="address"
            readonly
            @click.native="clickAddress"
          />
          <van-popup v-model="show" position="bottom">
            <!-- <van-area
              :columns-placeholder="['请选择', '请选择', '请选择']"
              :area-list="AreaList"
              title="标题"
              @confirm="handleConfirm"
            /> -->
            <van-cascader
              class="component-area"
              v-model="cascaderValue"
              title="请选择市-区 街道"
              :options="options"
              :field-names="fileNames"
              @close="onClose"
              @finish="handleConfirm"
              @change="onChange"
              active-color="#2da7fd"
            />
          </van-popup>
        </el-form-item>
</el-form>
</template>
<script>
import AreaList from "@/data/area_format_array.js";
export default {
  data() {
    return {
      options: [],
      fileNames: { text: "n", value: "i" },
      cascaderValue: null,
	  show: false,
    };
  },
  created() {
    this.init();
  },
  methods: {
  onClose() {
      this.show = false;
    },
    onChange({ selectedOptions, value, tabIndex }) {
      let arr, subIndex;
      let index = this.options.findIndex(
        (item) => item.i === selectedOptions[0].i
      );
      switch (tabIndex) {
        case 0:
          arr = AreaList.filter((item) => item.p === value).map((item) => {
            item.children = [];
            return item;
          });
          this.options[index].children = arr;
          break;
        case 1:
          subIndex = selectedOptions[0].children.findIndex(
            (item) => item.i === value
          );
          arr = AreaList.filter((item) => item.p === value).map((item) => {
            item.children = [];
            return item;
          });
          this.options[index].children[subIndex].children = arr;
          break;
        case 2:
          let subSubIndex = selectedOptions[1].children.findIndex(
            (item) => item.i === value
          );
          subIndex = selectedOptions[0].children.findIndex(
            (item) => item.i === selectedOptions[1].i
          );
          arr = AreaList.filter((item) => item.p === value);
          this.options[index].children[subIndex].children[
            subSubIndex
          ].children = arr;
      }
    },
    init() {
      this.options = AreaList.filter((item) => item.p === 0).map((item) => {
        item.children = [];
        return item;
      });
    },
    clickAddress() {
      this.show = true;
    },
    handleConfirm(data) {
      this.address = selectedOptions.reduce((prev, curr) => prev + curr.n, "");
      this.show = false;
    },
  }
}
</script>

3. 效果图
   
4. 涉及到的文件：