在element plus中使用checkbox 多选框实现大区省市区选择回选

1.产品拿来淘宝后台页面，希望我们的快递发货也用这一套

　　长这样：

2.后端说提供的数据是树形结构，大区id不要传，传省的id,勾选哪个传哪个

3.element ui的树形插件和级联选择器在数据上是可以实现的，但是ui应该不行，最后决定用checkbox 多选框自己写一个

4.el-checkbox 主要是indeterminate属性（控制中间状态）和 v-mode显示是否被显示

5.数据来源：最初是后端返回的树形结构数据，后面发现太旧。改用vant的省市区数据

1	`npm i @vant/area-data`

引入，再转为原来的树形结构：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

// 省市区转树形结构
import { areaList } from '@vant/area-data'
 console.log(areaList);
 
 
export const location = () => {
    let areaData:any= {
        province:[],
        city:[],
        area:[]
    }
    for (let key in areaList.province_list) {
        areaData.province.push({
            name:areaList.province_list[key],
            code:key
        })
    }
    for (let key in areaList.city_list) {
        areaData.city.push({
            name:areaList.city_list[key],
            code:key
        })
    }
    for (let key in areaList.county_list) {
        areaData.area.push({
            name:areaList.county_list[key],
            code:key
        })
    }
    return areaData
}
export const locations = () => {
    let datas: any = []
    let data: any = [
        {
            areaName: '华北',
            childrenList: [],
            coding: 1000000,
            id: 1,
            level: 0,
            parentId: 0
        },
        {
            areaName: '东北',
            childrenList: [],
            coding: 2000000,
            id: 2,
            level: 0,
            parentId: 0
        },
        {
            areaName: '华东',
            childrenList: [],
            coding: 3000000,
            id: 3,
            level: 0,
            parentId: 0
        },
        {
            areaName: '华南',
            childrenList: [],
            coding: 4000000,
            id: 4,
            level: 0,
            parentId: 0
        },
        {
            areaName: '华中',
            childrenList: [],
            coding: 8000000,
            id: 8,
            level: 0,
            parentId: 0
        },
        {
            areaName: '西南',
            childrenList: [],
            coding: 5000000,
            id: 5,
            level: 0,
            parentId: 0
        },
        {
            areaName: '西北',
            childrenList: [],
            coding: 6000000,
            id: 6,
            level: 0,
            parentId: 0
        },
        {
            areaName: '港澳台',
            childrenList: [],
            coding: 7000000,
            id: 7,
            level: 0,
            parentId: 0
        }
    ]
 
 
 
    for (let key in areaList.province_list) {
        datas.push({
            areaName: areaList.province_list[key],
            childrenList: [],
            coding: Number(key),
            id: Number(key.slice(0, 2)),
            level: 1,
            parentId: (key == '410000' || key == '420000' || key == '430000') ? 8000000 : (key == '810000' || key == '820000') ? 7000000 : Number(key.slice(0, 1)+'000000')
        })
 
    }
    datas.map((item: any) => {
        for (let key in areaList.city_list) {
            if (key.slice(0, 2) == item.id) {
                item.childrenList.push({
                    areaName: areaList.city_list[key],
                    childrenList: [],
                    coding: Number(key),
                    id: Number(key.slice(0, 4)),
                    level: 2,
                    parentId: item.coding
                })
            }
 
 
        }
    })
    datas.map((item: any) => {
        item.childrenList && item.childrenList.length > 0 && item.childrenList.map((child: any) => {
            for (let key in areaList.county_list) {
                if (child.id == key.slice(0, 4)) {
                    child.childrenList.push({
                        areaName: areaList.county_list[key],
                        childrenList: [],
                        coding: Number(key),
                        id: Number(key),
                        level: 3,
                        parentId: child.coding
                    })
                }
            }
        })
    })
 
    data.map((item: any) => {
        datas.map((child: any) => {
            if (item.coding == child.parentId) {
                item.childrenList.push(child)
            }
        })
    })
    let result =[data,datas] 
     
    return result
}
export const areaData = locations()[0]
export const areaRegion = locations()[1]
export const areaListData = location()