如何优雅的绘制一棵省市区三级可选择的树？

开始

总结一下开发过程中的思路想法各位大佬们看看就好

首先你拥有的数据结构所有省市区的信息列表以及已经选中的信息用的是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))