vant/packages/area/index.vue

<template>
  <picker
    class="van-area"
    ref="picker"
    showToolbar
    valueKey="name"
    :title="title"
    :columns="columns"
    @change="onChange"
    @confirm="$emit('confirm', $event)"
    @cancel="$emit('cancel', $event)"
  />
</template>

<script>
import { create } from '../utils';
import Picker from '../picker';

export default create({
  name: 'van-area',

  components: {
    Picker
  },

  props: {
    value: {},
    title: String,
    areaList: Object,
    // 省市县显示列数，3-省市县，2-省市，1-省
    columnsNum: {
      type: [String, Number],
      default: 3
    }
  },

  computed: {
    columns() {
      const columns = [];
      const { areaList } = this;

      if (!areaList || typeof areaList.province_list !== 'object') {
        return columns;
      }

      const code = this.value || '';
      const columnsNum = +this.columnsNum;

      columns.push({
        values: this.getList('province'),
        defaultIndex: this.getIndex('province', code)
      });

      if (columnsNum > 1) {
        columns.push({
          values: this.getList('city', code.slice(0, 2)),
          defaultIndex: this.getIndex('city', code)
        });
      }

      if (columnsNum > 2) {
        columns.push({
          values: this.getList('county', code.slice(0, 4)),
          defaultIndex: this.getIndex('county', code)
        });
      }

      return columns;
    }
  },

  methods: {
    // 根据省市县类型和对应的`code`获取对应列表
    getList(type, code) {
      const { areaList } = this;
      const list =
        type === 'province'
          ? areaList.province_list
          : type === 'city' ? areaList.city_list : areaList.county_list;

      let result = Object.keys(list).map(code => ({
        code,
        name: list[code]
      }));

      if (type !== 'province' && code) {
        result = result.filter(item => item.code.indexOf(code) === 0);
      }

      result.unshift({
        code: '-1',
        name: this.$t(type)
      });

      return result;
    },

    // 获取对应省市县在列表中的索引
    getIndex(type, code) {
      const compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
      const areaList = this.getList(type, code.slice(0, compareNum - 2));

      for (let i = 0; i < areaList.length; i++) {
        if (
          +areaList[i].code.slice(0, compareNum) === +code.slice(0, compareNum)
        ) {
          return i;
        }
      }

      return 0;
    },

    onChange(picker, values, index) {
      const code = values[index].code;
      // 处理省变化
      if (index === 0) {
        picker.setColumnValues(1, this.getList('city', code.slice(0, 2)));
        picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));
      } else if (index === 1) {
        picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));
      }
    },

    getValues() {
      return this.$refs.picker ? this.$refs.picker.getValues() : [];
    }
  }
});
</script>