开始
总结一下 开发过程中的思路想法 各位大佬们看看就好
首先你拥有的数据结构 所有省市区的信息列表 以及已经选中的信息 用的是element-ui的 el-tree
const cityStorage = {
provinceList:[
{id: 1, provinceId: "110000", name: "北京市"}
],//所有省
cityList:[
{id: 1, cityId: "110100", name: "北京市", provinceId: "110000", zipCode: "102600"}
],//所有市
districtList:[
{id: 1, districtId: "110101", name: "东城区", cityId: "110100"}
],//所有区
}
const selectList = [
{ provinceId: "110000",cityId: "110100",districtId: "110101"}
] // 所有选中的省市区 ID 保存的时候也是这个格式
复制代码
按需渲染
首先 作为有相对要求的开发人员 不会考虑说 直接的去渲染出整个树 那整个省市区加载的速度绝对会是感人的
那么 可行的解决方法是 一开始 只展示 所有省的信息 点击展开 时再去渲染下一层 数据
这个对应关系 相对还容易找 每次点击展开能获得当前的层级和id 根据层级和id去对应的city和district中过滤就行
这里分享一个小技巧 不通过判断的方式去对应 而是通过数据的方式
//level , id
const levelConfig = {
1: {
idLabel: 'cityId',
fetchLabel: 'cityList',
perIdLabel: 'provinceId'
},
2: {
idLabel: 'districtId',
fetchLabel: 'districtList',
perIdLabel: 'cityId'
}
}
// 那么过滤就可以这么写
cityStorage[levelConfig[level].fetchLabel].filter(item => item[levelConfig[level].perIdLabel] == id)
复制代码
获取数据 然后加载对应下一层 一切到现在为止 都还可以
赋值渲染
再往下 如果我有初始数据呢?
在只展示省信息的情况下 结合前面给的数据格式 怎么展示 这个省是 全选 半选(表示省中有选择的市或者区但没选全) 和 不选 ?
第一 你需要设法知道省份满足全选的条件
第二 你需要设法知道已经选择的情况
所以这个时候 需要做的 是计数 也就 ++
遍历一遍 cityStorage.provinceList 和 cityStorage.cityList
往Map中初始化 provinceId cityId 对应的计数
在遍历 cityStorage.districtList 过程中往Map 对应provinceId cityId 增加计数
那么 有没有什么别的基础数据 是要在这个时候初始化的呢?
例如 只给你一个 districtId 你怎么才能最快的 找到他对应的 cityId 和 provinceId
或者 只给你一个 id 怎么最快找到他 对应的 name 呢
我们可以构建一个Map来记录我们需要的信息
districtId:cityId
cityId:provinceId
那么 我可以通过 Map[districtId] 找到cityId Map[Map[districtId]] 找到 provinceId
id 和 name 的对应关系 也是如此
而这些 可以在 计数的 过程进行
接着 通过已经选择地区 的 列表 获取provinceId cityId的数据 的计数
两份数据都有了
在渲染 省的时候 判断 两份Map中对应的计数 是否相同来渲染勾选
那半选的状态怎么表示呢?el-tree并不支持设置半选的状态,必须是通过数据的形式呢?
通过模拟子节点的方法 当满足不全选的情况 模拟两个子节点
var children = [
{
id:provinceId+'111',
label:name,
type:'none'
},
{
id:provinceId+'222',
label:name,
type:'none'
}
]
复制代码
然后选中 其中一个 父元素自然就是半选状态
保存提交
最后是保存提交时候的数据处理
由于模拟了半选状态 所以最后获取到的选中的数据 会有两种
一种常规的6位 还是一种是模拟的d{6}xxx
而且如果 是出现这种d{6}xxx的数据 代表的是它所在的一级有些被选中了 而这些数据还没有出现在 渲染树中
这是就 需要有一个数据结构记录 这种情况
在已选择的数据 初始化计数的时候 新构建一个Map 存储 provinceId cityId出现的数据的下标(我这边保存的是districtId)
provinceId:[districtId,districtId,districtId]
cityId:[districtId,districtId,districtId]
至此 我们最后能拿到的 选中的 id 有 [310000,410000111,510100,610101]
此时这份数据中 有provinceId cityId districtId 以及 模拟的半选数据 怎么尽可能的优雅的生成我们需要的格式呢?
首先是分类 可以发现 xx0000表示的是省 xxx000 xxxx00 表示的是市
let _zeo = item.match(/(0+)$/g),
ype = _zeo ? _zeo[0] : '0'
switch (type) {
case '0':
districtList.push(item)
break;
case '00':
case '000':
cityList.push(item)
break;
case '0000':
provinceList.push(item)
break;
}
复制代码
而这种410000111 数据 可以通过 先前的 Map 将数据并入 districtList 中
接着就是净化数据
省选择了 不需要市的所有id 市选择了 不需要区的所有id
总结 判断条件
var sub = item.substr(0,2)
var re =new RegExp('\^' +sub+'\\d{4}'); // 省
// var sub = item.substr(0,4)
// var re =new RegExp('\^' +sub+'\\d{2}'); // 市
cityList.filter(code=>!code.match(re))
复制代码
最后 provinceList cityList districtList 都是有效的选中值
遍历一遍 cityStorage.districtList 将其中在provinceList cityList中存在id的数据并入 districtList中
此时 districtList 是最终有效的所有选中的 districtId值
此时 cityId = Map[districtId] province=Map[cityId]
写这个需求的时候 头真的很大 考虑的再清楚 写着写着 还是会有让人抓狂的问题
展示合并
等等 你以为就这么完了 还有一个展示需求 数据结构还是 保存的那份数据结构
希望展示成
当选择了一个省份全部地区的时候展示省份名称
当选择了一个省份下的部分市时展示市的名称
当选择了一个市下的所有地区时,只展示市的名称
当选择了一个市下的部分地区时,括号内展示地区名称
首先还是通过计数 获取 已经选中的有效的 provinceList cityList districtList
数据格式{provinceId: "110000",cityId: "110100",districtId: "110101"}
构建一个存 selectNameList 用于存放已经选中的 name name可以通过前面的Map[id]获取
provinceList 选择的省没问题 直接推入
cityList 遍历 构建新的数据 格式 {provinceId: "110000",cityId: "110100",districtId: "1"}
并入 districtList 中
对districtList 根据 cityId 排序
最后 遍历 districtList 通过标记判断每次是否是重复的cityId 设置数组 indeterminateNameList 记录不是全选的市的name
不重复 将标记记为当前cityId 如果上一个元素的 districtCode 是 1 将 indeterminateNameList 存入 selectNameList 中
selectNameList.push('(' + indeterminateNameList.join(',') + ')')
districtId == 1 全选 存入 selectNameList
districtId != 1 不是全选 存入 indeterminateNameList = [cityId]
在这个过程中 有需要 还可以记录 cityId 和 indeterminateNameList的管理关系
最终 selectNameList.join(',')
结语
程序猿真的不容易啊 遇到开发时间紧 杂七杂八事情多 还毫无头绪的时候 压力真的是大啊