省市区选择组件


1、数据库表结构

SQL 全选
CREATE TABLE [dbo].[data_Area](
	[ID] [nvarchar](255) NOT NULL,
	[isid] [int] IDENTITY(1,1) NOT NULL,
	[Name] [nvarchar](255) NULL,
	[ParentId] [nvarchar](255) NULL,
	[ShortName] [nvarchar](255) NULL,
	[LevelType] [nvarchar](5) NULL,
	[CityCode] [nvarchar](255) NULL,
	[ZipCode] [nvarchar](255) NULL,
	[MergerName] [nvarchar](255) NULL,
	[Country] [nvarchar](255) NULL,
	[Province] [nvarchar](255) NULL,
	[City] [nvarchar](255) NULL,
	[County] [nvarchar](255) NULL,
	[Longitude] [nvarchar](255) NULL,
	[Latitude] [nvarchar](255) NULL,
	[Pinyin] [nvarchar](255) NULL,
	[ProvinceZJM] [varchar](50) NULL,
	[CityZJM] [varchar](50) NULL,
	[CountyZJM] [varchar](50) NULL,
	[ProvinceId] [varchar](20) NULL,
	[CityId] [varchar](20) NULL,
	[CountyId] [varchar](20) NULL,
	[FYProvince] [nvarchar](50) NULL,
	[FYCity] [nvarchar](50) NULL,
	[FYCounty] [nvarchar](50) NULL,
 CONSTRAINT [PK_data_Area] PRIMARY KEY CLUSTERED 
(
	[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

2、数据JSON文件

下载地址

下载后放入

省市区选择组件

3、数据初始化

DBMergeProvider.cs文件

C# 全选
public class DBMergeProvider : IDBMerge
{
	public EnumDBType DBType => EnumDBType.Business;

	public void DoDBMigrate(ConnectionStrItem connItem)
	{
		using (var defaultEntities = new EntitiesContext(connItem))
		{
			/*
			不过数据库model有改动的话需要先执行下 add-migrate xxx 命令,然后每次运行程序GetPendingMigrations()就会检测有无更新,有的话自动迁移。
		   GetPendingMigrations方法官方文档说明  https://docs.microsoft.com/zh-cn/dotnet/api/microsoft.entityframeworkcore.relationaldatabasefacadeextensions.getpendingmigrations?view=efcore-2.1
			*/
			if (defaultEntities.Database.GetPendingMigrations().Any())
			{
				defaultEntities.Database.Migrate();
			}
			if (!defaultEntities.data_Area.Any())
				this.InitData<data_Area>(defaultEntities);
		}
	}

	void InitData<T>(EntitiesContext entities) where T : class
	{
		string typeName = typeof(T).Name;
		string jsonPath = Path.Combine(Directory.GetCurrentDirectory(), "StaticFiles", typeName + ".json");
		if (!File.Exists(jsonPath))
			return;
		string json = File.ReadAllText(jsonPath);
		List<T> data = Newtonsoft.Json.JsonConvert.DeserializeObject<List<T>>(json);

		//foreach (var obj in data)
		//{
		//    entities.GZEntitiesContextCommon.EnabledBusinessCode = false;
		//    entities.Entry(obj).State = EntityState.Added;
		//    entities.SaveChanges();
		//}

		entities.GZEntitiesContextCommon.EnabledBusinessCode = false;
		entities.BulkInsert<T>(data);
		entities.SaveChanges();
	}
}

4、API控制器

C# 全选
public partial class AreaController : _APIBase
{
	/// <summary>
	/// 地区--获取
	/// </summary>
	/// <returns></returns>
	[ServerLibs.Attributes.APIAuthorize(APIAuthorizeAttribute.RequestType.login)]
	[HttpGet]
	public GZAPIResultObject GetSelectData(string maxLevelType)
	{
		var data = entitiesQuery.data_Area
			.Where(w => String.Compare(w.LevelType, "0") > 0 && String.Compare(w.LevelType, maxLevelType) <= 0)
			.Select(s => new
			{
				s.ID,
				s.ParentId,
				s.Name
			}).OrderBy(o => o.ID).ThenBy(o => o.ParentId).ThenBy(o => o.Name).ToList();

		return GZAPISuccessObject(data);
	}


	#region 生成器生成代码

	#region 列表查询
	/// <summary>
	/// 列表返回实体类
	/// </summary>
	public class DataListItem
	{
		/// <summary>
		/// ID
		/// </summary>
		public string ID { get; set; }
		/// <summary>
		/// Name
		/// </summary>
		public string Name { get; set; }
		/// <summary>
		/// ParentId
		/// </summary>
		public string ParentId { get; set; }
		/// <summary>
		/// ShortName
		/// </summary>
		public string ShortName { get; set; }
		/// <summary>
		/// LevelType
		/// </summary>
		public string LevelType { get; set; }
		/// <summary>
		/// CityCode
		/// </summary>
		public string CityCode { get; set; }
		/// <summary>
		/// ZipCode
		/// </summary>
		public string ZipCode { get; set; }
		/// <summary>
		/// MergerName
		/// </summary>
		public string MergerName { get; set; }
		/// <summary>
		/// Country
		/// </summary>
		public string Country { get; set; }
		/// <summary>
		/// Province
		/// </summary>
		public string Province { get; set; }
		/// <summary>
		/// City
		/// </summary>
		public string City { get; set; }
		/// <summary>
		/// County
		/// </summary>
		public string County { get; set; }
		/// <summary>
		/// Longitude
		/// </summary>
		public string Longitude { get; set; }
		/// <summary>
		/// Latitude
		/// </summary>
		public string Latitude { get; set; }
		/// <summary>
		/// Pinyin
		/// </summary>
		public string Pinyin { get; set; }
		/// <summary>
		/// ProvinceZJM
		/// </summary>
		public string ProvinceZJM { get; set; }
		/// <summary>
		/// CityZJM
		/// </summary>
		public string CityZJM { get; set; }
		/// <summary>
		/// CountyZJM
		/// </summary>
		public string CountyZJM { get; set; }
		/// <summary>
		/// ProvinceId
		/// </summary>
		public string ProvinceId { get; set; }
		/// <summary>
		/// CityId
		/// </summary>
		public string CityId { get; set; }
		/// <summary>
		/// CountyId
		/// </summary>
		public string CountyId { get; set; }
		/// <summary>
		/// FYProvince
		/// </summary>
		public string FYProvince { get; set; }
		/// <summary>
		/// FYCity
		/// </summary>
		public string FYCity { get; set; }
		/// <summary>
		/// FYCounty
		/// </summary>
		public string FYCounty { get; set; }
	}

	IQueryable<DataListItem> QueryList(IQueryable<data_Area> query)
	{
		var data = query.Select(s => new DataListItem()
		{
			ID = s.ID,
			Name = s.Name,
			ParentId = s.ParentId,
			ShortName = s.ShortName,
			LevelType = s.LevelType,
			CityCode = s.CityCode,
			ZipCode = s.ZipCode,
			MergerName = s.MergerName,
			Country = s.Country,
			Province = s.Province,
			City = s.City,
			County = s.County,
			Longitude = s.Longitude,
			Latitude = s.Latitude,
			Pinyin = s.Pinyin,
			ProvinceZJM = s.ProvinceZJM,
			CityZJM = s.CityZJM,
			CountyZJM = s.CountyZJM,
			ProvinceId = s.ProvinceId,
			CityId = s.CityId,
			CountyId = s.CountyId,
			FYProvince = s.FYProvince,
			FYCity = s.FYCity,
			FYCounty = s.FYCounty,
		});

		return data;
	}

	#endregion


	public class P_SearchList : ModalAgGridSearchData
	{
		/// <summary>
		/// isid_起始
		/// </summary>
		public int? isid_Begin { get; set; }
		/// <summary>
		/// isid_截至
		/// </summary>
		public int? isid_End { get; set; }
		/// <summary>
		/// ID
		/// </summary>
		public string ID { get; set; }
		/// <summary>
		/// Name
		/// </summary>
		public string Name { get; set; }
		/// <summary>
		/// ParentId
		/// </summary>
		public string ParentId { get; set; }
	}

	bool IsNull<T>(T o)
	{
		return true;
	}
	/// <summary>
	/// 查询列表
	/// </summary>
	/// <returns></returns>
	[HttpPost]
	public GZAPIResultArrayPageSearch<DataListItem> SearchList(P_SearchList searchData)
	{
		var queryEntity = entitiesQuery.data_Area;

		if (searchData.isid_Begin != null) queryEntity = queryEntity.Where(w => w.isid >= searchData.isid_Begin);
		if (searchData.isid_End != null) queryEntity = queryEntity.Where(w => w.isid <= searchData.isid_End);
		if (!String.IsNullOrEmpty(searchData.ID)) queryEntity = queryEntity.Where(w => w.ID == searchData.ID);
		if (!String.IsNullOrEmpty(searchData.Name)) queryEntity = queryEntity.Where(w => w.Name.Contains(searchData.Name));
		if (!String.IsNullOrEmpty(searchData.ParentId)) queryEntity = queryEntity.Where(w => w.ParentId == searchData.ParentId);


		var query = QueryList(queryEntity);

		var filterHelper = new GZFilterHelper<DataListItem>();
		query = filterHelper.UseFilter(query, searchData.filterModel);
		query = filterHelper.UseOrder(query, searchData.sortModel, nameof(DataListItem.ID));
		var total = query.Count();
		query = query.Skip(searchData.startRow).Take(searchData.rowLength);
		var data = query.ToList();

		return GZAPISuccessArrayPage(total, data);
	}




	/// <summary>
	/// 新增实体类
	/// </summary>
	public class P_Create
	{
		///<summary>
		/// ID
		/// </summary>
		public string ID { get; set; }
		///<summary>
		/// Name
		/// </summary>
		public string Name { get; set; }
		///<summary>
		/// ParentId
		/// </summary>
		public string ParentId { get; set; }
		///<summary>
		/// ShortName
		/// </summary>
		public string ShortName { get; set; }
		///<summary>
		/// LevelType
		/// </summary>
		public string LevelType { get; set; }
		///<summary>
		/// CityCode
		/// </summary>
		public string CityCode { get; set; }
		///<summary>
		/// ZipCode
		/// </summary>
		public string ZipCode { get; set; }
		///<summary>
		/// MergerName
		/// </summary>
		public string MergerName { get; set; }
		///<summary>
		/// Country
		/// </summary>
		public string Country { get; set; }
		///<summary>
		/// Province
		/// </summary>
		public string Province { get; set; }
		///<summary>
		/// City
		/// </summary>
		public string City { get; set; }
		///<summary>
		/// County
		/// </summary>
		public string County { get; set; }
		///<summary>
		/// Longitude
		/// </summary>
		public string Longitude { get; set; }
		///<summary>
		/// Latitude
		/// </summary>
		public string Latitude { get; set; }
		///<summary>
		/// Pinyin
		/// </summary>
		public string Pinyin { get; set; }
		///<summary>
		/// ProvinceZJM
		/// </summary>
		public string ProvinceZJM { get; set; }
		///<summary>
		/// CityZJM
		/// </summary>
		public string CityZJM { get; set; }
		///<summary>
		/// CountyZJM
		/// </summary>
		public string CountyZJM { get; set; }
		///<summary>
		/// ProvinceId
		/// </summary>
		public string ProvinceId { get; set; }
		///<summary>
		/// CityId
		/// </summary>
		public string CityId { get; set; }
		///<summary>
		/// CountyId
		/// </summary>
		public string CountyId { get; set; }
		///<summary>
		/// FYProvince
		/// </summary>
		public string FYProvince { get; set; }
		///<summary>
		/// FYCity
		/// </summary>
		public string FYCity { get; set; }
		///<summary>
		/// FYCounty
		/// </summary>
		public string FYCounty { get; set; }
	}

	[HttpPost]
	public GZAPIResultArray<DataListItem> Create(P_Create param)
	{
		if (param == null)
		{
			return GZAPIBadRequestArray<DataListItem>("参数为空!");
		}
		List<string> validateErrMsg = new List<string>();


		if (String.IsNullOrEmpty(param.ID))
			validateErrMsg.Add("ID不能为空");

		if (String.IsNullOrEmpty(param.Name))
			validateErrMsg.Add("Name不能为空");

		if (String.IsNullOrEmpty(param.ShortName))
			validateErrMsg.Add("ShortName不能为空");

		if (validateErrMsg.Count > 0)
		{
			return GZAPIBadRequestArray<DataListItem>(String.Join(",", validateErrMsg));
		}
		using (var trans = entities.Database.BeginTransaction())
		{
			try
			{
				data_Area data = new data_Area()
				{
					ID = param.ID,
					Name = param.Name,
					ParentId = param.ParentId,
					ShortName = param.ShortName,
					LevelType = param.LevelType,
					CityCode = param.CityCode,
					ZipCode = param.ZipCode,
					MergerName = param.MergerName,
					Country = param.Country,
					Province = param.Province,
					City = param.City,
					County = param.County,
					Longitude = param.Longitude,
					Latitude = param.Latitude,
					Pinyin = param.Pinyin,
					ProvinceZJM = param.ProvinceZJM,
					CityZJM = param.CityZJM,
					CountyZJM = param.CountyZJM,
					ProvinceId = param.ProvinceId,
					CityId = param.CityId,
					CountyId = param.CountyId,
					FYProvince = param.FYProvince,
					FYCity = param.FYCity,
					FYCounty = param.FYCounty,

				};
				entities.data_Area.Add(data);
				entities.SaveChanges();
				trans.Commit();
				var queryData = this.QueryList(entities.data_Area.Where(w => w.ID == data.ID));
				return GZAPISuccessArray<DataListItem>(queryData.ToList());
			}
			catch (Exception ex)
			{
				trans.Rollback();
				return GZAPIBadRequestArray<DataListItem>(ex.ToString());
			}
		}
	}




	/// <summary>
	/// 明细返回数据模型
	/// </summary>
	public class R_DetailItem
	{
		/// <summary>
		/// ID
		/// </summary>
		public string ID { get; set; }
		/// <summary>
		/// Name
		/// </summary>
		public string Name { get; set; }
		/// <summary>
		/// ParentId
		/// </summary>
		public string ParentId { get; set; }
		/// <summary>
		/// ShortName
		/// </summary>
		public string ShortName { get; set; }
		/// <summary>
		/// LevelType
		/// </summary>
		public string LevelType { get; set; }
		/// <summary>
		/// CityCode
		/// </summary>
		public string CityCode { get; set; }
		/// <summary>
		/// ZipCode
		/// </summary>
		public string ZipCode { get; set; }
		/// <summary>
		/// MergerName
		/// </summary>
		public string MergerName { get; set; }
		/// <summary>
		/// Country
		/// </summary>
		public string Country { get; set; }
		/// <summary>
		/// Province
		/// </summary>
		public string Province { get; set; }
		/// <summary>
		/// City
		/// </summary>
		public string City { get; set; }
		/// <summary>
		/// County
		/// </summary>
		public string County { get; set; }
		/// <summary>
		/// Longitude
		/// </summary>
		public string Longitude { get; set; }
		/// <summary>
		/// Latitude
		/// </summary>
		public string Latitude { get; set; }
		/// <summary>
		/// Pinyin
		/// </summary>
		public string Pinyin { get; set; }
		/// <summary>
		/// ProvinceZJM
		/// </summary>
		public string ProvinceZJM { get; set; }
		/// <summary>
		/// CityZJM
		/// </summary>
		public string CityZJM { get; set; }
		/// <summary>
		/// CountyZJM
		/// </summary>
		public string CountyZJM { get; set; }
		/// <summary>
		/// ProvinceId
		/// </summary>
		public string ProvinceId { get; set; }
		/// <summary>
		/// CityId
		/// </summary>
		public string CityId { get; set; }
		/// <summary>
		/// CountyId
		/// </summary>
		public string CountyId { get; set; }
		/// <summary>
		/// FYProvince
		/// </summary>
		public string FYProvince { get; set; }
		/// <summary>
		/// FYCity
		/// </summary>
		public string FYCity { get; set; }
		/// <summary>
		/// FYCounty
		/// </summary>
		public string FYCounty { get; set; }
	}
	/// <summary>
	/// 获得明细
	/// </summary>
	[HttpGet]
	public GZAPIResultEntity<R_DetailItem> GetData(string ID)
	{
		var data = entities.data_Area.Where(w => w.ID == ID).Select(s => new R_DetailItem()
		{
			ID = s.ID,
			Name = s.Name,
			ParentId = s.ParentId,
			ShortName = s.ShortName,
			LevelType = s.LevelType,
			CityCode = s.CityCode,
			ZipCode = s.ZipCode,
			MergerName = s.MergerName,
			Country = s.Country,
			Province = s.Province,
			City = s.City,
			County = s.County,
			Longitude = s.Longitude,
			Latitude = s.Latitude,
			Pinyin = s.Pinyin,
			ProvinceZJM = s.ProvinceZJM,
			CityZJM = s.CityZJM,
			CountyZJM = s.CountyZJM,
			ProvinceId = s.ProvinceId,
			CityId = s.CityId,
			CountyId = s.CountyId,
			FYProvince = s.FYProvince,
			FYCity = s.FYCity,
			FYCounty = s.FYCounty,

		}).FirstOrDefault();
		if (data == null)
		{
			return GZAPIFailRequestEntity<R_DetailItem>("数据不存在");
		}
		return GZAPISuccessEntity<R_DetailItem>(data);
	}



	/// <summary>
	/// 更新实体类
	/// </summary>
	public class P_Update
	{
		public string ID { get; set; }
		/// <summary>
		/// Name
		/// </summary>
		public string Name { get; set; }
		/// <summary>
		/// ParentId
		/// </summary>
		public string ParentId { get; set; }
		/// <summary>
		/// ShortName
		/// </summary>
		public string ShortName { get; set; }
		/// <summary>
		/// LevelType
		/// </summary>
		public string LevelType { get; set; }
		/// <summary>
		/// CityCode
		/// </summary>
		public string CityCode { get; set; }
		/// <summary>
		/// ZipCode
		/// </summary>
		public string ZipCode { get; set; }
		/// <summary>
		/// MergerName
		/// </summary>
		public string MergerName { get; set; }
		/// <summary>
		/// Country
		/// </summary>
		public string Country { get; set; }
		/// <summary>
		/// Province
		/// </summary>
		public string Province { get; set; }
		/// <summary>
		/// City
		/// </summary>
		public string City { get; set; }
		/// <summary>
		/// County
		/// </summary>
		public string County { get; set; }
		/// <summary>
		/// Longitude
		/// </summary>
		public string Longitude { get; set; }
		/// <summary>
		/// Latitude
		/// </summary>
		public string Latitude { get; set; }
		/// <summary>
		/// Pinyin
		/// </summary>
		public string Pinyin { get; set; }
		/// <summary>
		/// ProvinceZJM
		/// </summary>
		public string ProvinceZJM { get; set; }
		/// <summary>
		/// CityZJM
		/// </summary>
		public string CityZJM { get; set; }
		/// <summary>
		/// CountyZJM
		/// </summary>
		public string CountyZJM { get; set; }
		/// <summary>
		/// ProvinceId
		/// </summary>
		public string ProvinceId { get; set; }
		/// <summary>
		/// CityId
		/// </summary>
		public string CityId { get; set; }
		/// <summary>
		/// CountyId
		/// </summary>
		public string CountyId { get; set; }
		/// <summary>
		/// FYProvince
		/// </summary>
		public string FYProvince { get; set; }
		/// <summary>
		/// FYCity
		/// </summary>
		public string FYCity { get; set; }
		/// <summary>
		/// FYCounty
		/// </summary>
		public string FYCounty { get; set; }
	}
	/// <summary>
	/// 更新方法
	/// </summary>
	[HttpPost]
	public GZAPIResultArray<DataListItem> Update(P_Update param)
	{
		if (param == null)
		{
			return GZAPIBadRequestArray<DataListItem>("参数为空!");
		}
		List<string> validateErrMsg = new List<string>();

		if (String.IsNullOrEmpty(param.ID))
			validateErrMsg.Add("ID不能为空");

		if (String.IsNullOrEmpty(param.Name))
			validateErrMsg.Add("Name不能为空");

		if (String.IsNullOrEmpty(param.ShortName))
			validateErrMsg.Add("ShortName不能为空");

		if (validateErrMsg.Count > 0)
		{
			return GZAPIBadRequestArray<DataListItem>(String.Join(",", validateErrMsg));
		}

		var data = entities.data_Area.Where(w => w.ID == param.ID).FirstOrDefault();
		if (data == null)
		{
			return GZAPIFailRequestArray<DataListItem>("数据不存在!");
		}
		data.Name = param.Name;
		data.ParentId = param.ParentId;
		data.ShortName = param.ShortName;
		data.LevelType = param.LevelType;
		data.CityCode = param.CityCode;
		data.ZipCode = param.ZipCode;
		data.MergerName = param.MergerName;
		data.Country = param.Country;
		data.Province = param.Province;
		data.City = param.City;
		data.County = param.County;
		data.Longitude = param.Longitude;
		data.Latitude = param.Latitude;
		data.Pinyin = param.Pinyin;
		data.ProvinceZJM = param.ProvinceZJM;
		data.CityZJM = param.CityZJM;
		data.CountyZJM = param.CountyZJM;
		data.ProvinceId = param.ProvinceId;
		data.CityId = param.CityId;
		data.CountyId = param.CountyId;
		data.FYProvince = param.FYProvince;
		data.FYCity = param.FYCity;
		data.FYCounty = param.FYCounty;

		entities.SaveChanges();

		var queryData = this.QueryList(entities.data_Area.Where(w => w.ID == data.ID));
		return GZAPISuccessArray<DataListItem>(queryData.ToList());
	}



	/// <summary>
	/// 删除
	/// </summary>
	[HttpGet]
	public GZAPIResult Delete(string ID)
	{
		var data = entities.data_Area.Where(w => w.ID == ID).FirstOrDefault();
		if (data == null)
		{
			return GZAPIFailRequest("数据不存在!");
		}
		else
		{
			entities.data_Area.Remove(data);
			entities.SaveChanges();
			return GZAPISuccess();
		}
	}


	#endregion
}

5、前端组件代码

省市区选择组件

Markup 全选
<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: Number,
      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() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      var me = this
      request.getData(this, this.dataLevel).then((res) => {
        me.dataSource = res.data
        me.data = me.convert2Data(res.data, 100000)
      })
    },
    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 = '',
        cityID = values[1],
        cityName = '',
        districtID = values[2],
        districtName = ''

      if (provinceID || '' != '') {
        var objProvince = this.dataSource.find((item) => item.id == provinceID)
        provinceName = objProvince.name
      }
      if (cityID || '' != '') {
        var objCity = this.dataSource.find((item) => item.id == cityID)
        cityName = objCity.name
      }
      if (districtID || '' != '') {
        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
        if (this.options.provinceNameFildName)
          this.options.dataSource[this.options.provinceNameFildName] =
            provinceName
        if (this.options.cityIDFildName)
          this.options.dataSource[this.options.cityIDFildName] = cityID
        if (this.options.cityNameFildName)
          this.options.dataSource[this.options.cityNameFildName] = cityName
        if (this.options.districtIDFildName)
          this.options.dataSource[this.options.districtIDFildName] = districtID
        if (this.options.districtNameFildName)
          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>

6、使用

HTML 全选
<SelectArea :data-level="2" v-model="searchData.toCity" :options="{
                  dataSource:searchData,
                  provinceIDFildName: 'toProvince',
                  provinceNameFildName: 'toProvinceName',
                  cityIDFildName: 'toCity',
                  cityNameFildName: 'toCityName',
                }"></SelectArea>    

 

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
张国生
评论列表

发表评论

评论内容
昵称:
关联文章

选择组件SelectArea
Element-UI选择组件city-picker
选择组件
数据库
2023年最新数据下载;中国国家行政区域数据库下载
公共数据字典选择组件SelectCommonDict
vue自定义组件props中设置object属性的默认值:
.Net 下高性能分表分库组件-连接模式原理
单表演练之产品资料,辅助组件ViewDataBinding模式
C# winform选择dll文件
C# Winform选择文件夹目录
.NET6中一些常用组件的配置及使用记录,持续更新中。。。
Winform窗体设置组件可用状态
JS清除Input File 的选择文件 javascript清除Input File选择文件
(原创)WinForm中莫名其妙的小BUG——RichTextBox自动选择字词问题
百度eChart:图例组件位置
CodeMirror 格式化内容和内容选择
日志级别的选择:Debug、Info、Warn、Error还是Fatal
开源组件:DockPanelSuite(WeifenLuo.WinFormsUI.Docking)Visual Studio风格的用户界面 使用
jQuery动态添加设置.active属性实现当前选择节点样式