省市区选择组件SelectArea-YES开发框架网

YESWEB开发库框架集成城市区选择组件SelectArea

使用：

1、引用组件

JavaScript 全选

import SelectArea from '@components/SelectArea/index.vue'

2、使用

HTML 全选

<SelectArea :data-level="2" :options="{dataSource:data,provinceIDFildName:'startProvinceID',provinceNameFildName:'startProvinceName',cityIDFildName:'startCityID',cityNameFildName:'startCityName'}"></SelectArea>

省市区选择组件SelectArea

属性说明

属性	类型	说明
disabled	boolean	组件可用状态
data-level	int	数据级别，1-省 2-省市 3-省市区默认3
options	object	配置，当用户选择数据的时候，会根据配置自动设置附加数据字段
options.dataSource	object	数据源
options.provinceIDFildName	string	数据源中省份ID对应的字段名称，当选择数据的时候，会自动设置该属性值
options.provinceNameFildName	string	数据源中省份名称对应的字段名称，当选择数据的时候，会自动设置该属性值
options.cityIDFildName	string	数据源中城市ID对应的字段名称，当选择数据的时候，会自动设置该属性值
options.cityNameFildName	string	数据源中城市名称对应的字段名称，当选择数据的时候，会自动设置该属性值
options.districtIDFildName	string	数据源中区域ID对应的字段名称，当选择数据的时候，会自动设置该属性值
options.districtNameFildName	string	数据源中区域名称对应的字段名称，当选择数据的时候，会自动设置该属性值

SelectArea组件源码：

HTML 全选

<template>
  <el-cascader style="width:100%;" ref="cascader" transfer :disabled="disabled" :options="data" @change="selected" v-model="currentValue"></el-cascader>
</template>
<style lang="less" scoped>
</style>
<script>
import { ajax } from 'yesweb-libs'

const request = {
  getData(context, maxLevel) {
    return ajax.get(context, '/xqtms/area/GetSelectData', {
      maxLevelType: maxLevel,
    })
  },
}

export default {
  name: 'SelectArea',
  data() {
    return {
      dataSource: [],
      data: [],
      currentValue: [],
    }
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    dataLevel: {
      type: String,
      default: '3',
    },
    value: Array,
    options: {
      type: Object,
      default: function () {
        return {
          dataSource: null, // 对象数据
          provinceIDFildName: null, // 省份绑定字段
          provinceNameFildName: null, // 省份绑定字段
          cityIDFildName: null, // 城市绑定字段
          cityNameFildName: null, // 城市绑定字段
          districtIDFildName: null, // 区、县绑定字段
          districtNameFildName: null, // 区、县绑定字段
        }
      },
    },
  },
  computed: {},
  created() {
    console.log('selectarea create')
    this.refreshData()
  },
  methods: {
    refreshData() {
      var me = this
      // debugger
      request.getData(this,this.dataLevel).then((res) => {
        me.dataSource = res.data
        me.data = me.convert2Data(res.data, 100000)
        console.log(me.data)
      })
    },
    convert2Data(arr, parentID) {
      var me = this
      var v = []
      var ds = arr.filter((item) => item.parentId == parentID)
      ds.forEach((item) => {
        var obj = {
          value: item.id,
          label: item.name,
          source: item,
        }
        var detail = me.convert2Data(arr, item.id)
        if (detail.length > 0) {
          obj.children = detail
        }
        v.push(obj)
      })
      return v
    },
    selected(values) {
      var provinceID = values[0],
        provinceName = ''
      var cityID = values[1],
        cityName = ''
      var districtID = values[2],
        districtName = ''

      var objProvince = this.dataSource.find((item) => item.id == provinceID)
      provinceName = objProvince.name
      var objCity = this.dataSource.find((item) => item.id == cityID)
      cityName = objCity.name
      var objArea = this.dataSource.find((item) => item.id == districtID)
      districtName = objArea.name

      if (this.options.dataSource) {
        if (this.options.provinceIDFildName) {
          this.options.dataSource[this.options.provinceIDFildName] = provinceID
          this.options.dataSource[this.options.provinceNameFildName] =
            provinceName
          this.options.dataSource[this.options.cityIDFildName] = cityID
          this.options.dataSource[this.options.cityNameFildName] = cityName
          this.options.dataSource[this.options.districtIDFildName] = districtID
          this.options.dataSource[this.options.districtNameFildName] =
            districtName
        }
      }
      this.$emit('input', this.currentValue)
    },
  },
  watch: {
    value(val) {
      if (JSON.stringify(val) == JSON.stringify(this.currentValue)) return
      this.currentValue = val
    },
  },
}
</script>