wt_project_web_bak/src/components/area-picker/index.vue

<template>
  <div class="full-width">
    <div>
      <el-cascader
        :placeholder="placeholder"
        clearable
        class="full-width"
        v-model="area"
        :options="areaDic"
        filterable
        @change="changeArea"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {},
      areaDic: [],
      area: ''
    }
  },
  mounted() {
    this.getArea()
  },
  methods: {
    getArea() {
      const tmp = localStorage.getItem('area')
      if (tmp) {
        this.areaDic = JSON.parse(tmp)
        return
      }
      this.$api.common.region({ code: '' }).then(res => {
        if (res.code === 200) {
          const list = res.data.filter(ele => ele.key !== '111111')
          this.areaDic = list.map(item => this.mapTree(item))
          localStorage.setItem('area', JSON.stringify(this.areaDic))
        }
      })
    },
    mapTree(item) {
      const haveChildren =
        Array.isArray(item.children) && item.children.length > 0
      return {
        key: item,
        value: item,
        label: item.title,
        children: haveChildren ? item.children.map(i => this.mapTree(i)) : []
      }
    },
    changeArea(res) {
      const tmps = res.map(ele => {
        return { key: ele.key, title: ele.title }
      })
      console.log(this.area)
      this.$emit('change', tmps)
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-input) {
  width: 100%;
}
</style>