uniapp-手写三级地区选择实现

青旅半醒 2022-12-07 15:26 234阅读 0赞

### 文章目录 ###

*   *  0.演示
     *  1.插件代码
     *  2.使用
     *  3.完整引用

## 0.演示 ##

![在这里插入图片描述][20200916192633605.gif_pic_center]  
git地址： [https://gitee.com/xl2333/uniapp-cxl-level3-query][https_gitee.com_xl2333_uniapp-cxl-level3-query]

## 1.插件代码 ##

> cxl-level3-query.vue

<template>
        <view>
            <view class="dict-select-body">
                <scroll-view class="dict-select-block" :scroll-top="TopHeight1" scroll-y @scroll="scroll1" style="height:240px; width: 100%;">
                    <view>
                        <view class="dict-select-item" v-for="(item, index) in oneList" :key="index" v-if="fs">
                            <checkbox v-if="f" @tap="checkOneItemHandler(item, index)" :class="selectValue1.indexOf(item.value) > -1 ? 'checked' : powSelectValueList1.indexOf(item.value) > -1 ? 'grey checked' : ''" ></checkbox>
                            <text class="dict-select-text" @tap="clickOneItemHandler(item, index)" :style="{ color: clickItem1.value === item.value ? '#1988e4' : '' }">
                                {
       { item.label }}
                            </text>
                        </view>
                    </view>
                </scroll-view>
    
                <scroll-view class="dict-select-block" :scroll-top="TopHeight2" scroll-y @scroll="scroll2" style="height:240px; width: 100%;">
                    <view>
                        <view class="dict-select-item" v-for="(item, index) in twoList" :key="index">
                            <checkbox v-if="f" @tap="checkTwoItemHandler(item, index)" :class="selectValue2.indexOf(item.value) > -1 ? 'checked' : powSelectValueList2.indexOf(item.value) > -1 ? 'grey checked' : ''" ></checkbox>
                            <text class="dict-select-text" @tap="clickTwoItemHandler(item, index)" :style="{ color: clickItem2.value === item.value ? '#1988e4' : '' }">
                                {
       { item.label.replace(clickItem1.label, '') }}
                            </text>
                        </view>
                    </view>
                </scroll-view>
    
                <scroll-view class="dict-select-block" :scroll-top="TopHeight3" scroll-y @scroll="scroll3" style="height:240px; width: 100%;">
                    <view>
                        <view class="dict-select-item" v-for="(item, index) in threeList" :key="index">
                            <checkbox v-if="f" @tap="checkThreeItemHandler(item, index)" :class="selectValue3.indexOf(item.value) > -1 ? 'checked' : ''"></checkbox>
                            <text class="dict-select-text" @tap="clickThreeItemHandler(item, index)" :style="{ color: clickItem3.value === item.value ? '#1988e4' : '' }">
                                {
       { item.label.replace(clickItem1.label, '') }}
                            </text>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </template>
    
    <script> export default { props: { dicData: { type: Array }, arrayName: '' }, data() { return { demo: '', powSelectList1: [], powSelectValueList1: [], powSelectList2: [], powSelectValueList2: [], clickItem1: { }, clickItem2: { }, clickItem3: { }, f: true, fs: true, selectList1: [], selectList2: [], selectList3: [], selectValue1: [], selectValue2: [], selectValue3: [], oneList: [], twoList: [], threeList: [], TopHeight1: 0, TopHeight2: 0, TopHeight3: 0 }; }, computed: { }, watch: { // selectList1(v, o) { this.selectValue1 = []; if (v) { v.map(val => { this.selectValue1.push(val.value); }); this.powFilter(1, v); } this.$emit('updateData', { selectList1: this.selectList1, selectList2: this.selectList2, selectList3: this.selectList3, selectValueList1: this.selectValue1, selectValueList2: this.selectValue2, selectValueList3: this.selectValue3 }); }, selectList2(v, o) { this.selectValue2 = []; if (v) { v.map(val => { this.selectValue2.push(val.value); }); this.powFilter(2, v); } this.$emit('updateData', { selectList1: this.selectList1, selectList2: this.selectList2, selectList3: this.selectList3, selectValueList1: this.selectValue1, selectValueList2: this.selectValue2, selectValueList3: this.selectValue3 }); }, selectList3(v, o) { this.selectValue3 = []; if (v) { v.map(val => { this.selectValue3.push(val.value); }); } this.powFilter(3, v); this.$emit('updateData', { selectList1: this.selectList1, selectList2: this.selectList2, selectList3: this.selectList3, selectValueList1: this.selectValue1, selectValueList2: this.selectValue2, selectValueList3: this.selectValue3 }); } }, mounted() { if (this.dicData) { this.oneList = []; this.twoList = []; this.threeList = []; this.dicData.map(val => { // 获取一级 this.oneList.push(val); }); // 获取二级 if (this.oneList && this.oneList[0] && this.oneList[0].children) { this.twoList = this.oneList[0].children; // 获取三级 if (this.twoList[0].children) { this.threeList = this.twoList[0].children; } } else { this.twoList = []; this.threeList = []; } this.clickItem1 = this.oneList[0]; } }, methods: { powFilter(index, v) { if (index == 1) { this.powSelectList2 = []; this.powSelectValueList2 = []; } else if (index == 2) { var nowSelect1 = this.clickItem1; var select1Children = nowSelect1.children; if (select1Children) { var childrenValues = []; select1Children.map(val => { if (val.value) { childrenValues.push(val.value); } }); var level2Array = this.selectValue2; if (this.isContained(level2Array, childrenValues)) { if (nowSelect1 && nowSelect1.value) { this.selectList1.push(nowSelect1); this.selectValue1.push(nowSelect1.value); } } else { var isInclude = false; level2Array.map(out => { childrenValues.map(ch => { if (out == ch) { isInclude = true; } }); }); if (isInclude) { var tempSelectList1 = JSON.parse(JSON.stringify(this.selectList1)); var newSelectList1 = []; var newSelectValue1 = []; tempSelectList1.map(val => { if (val.value !== nowSelect1.value) { if (val && val.value) { newSelectList1.push(val); newSelectValue1.push(val.value); } } }); this.selectList1 = newSelectList1; this.selectValue1 = newSelectValue1; this.$nextTick(function() { if (nowSelect1 && nowSelect1.value) { this.fs = false; this.powSelectList1.push(nowSelect1); this.powSelectValueList1.push(nowSelect1.value); this.fs = true; } }); this.$forceUpdate(); } else { var isPow = false; var powList2 = this.powSelectList2; powList2.map(out => { childrenValues.map(ch => { if (out.value == ch) { isPow = true; } }); }); if (isPow) { } else { var tempSelectList1 = JSON.parse(JSON.stringify(this.selectList1)); var newSelectList1 = []; var newSelectValue1 = []; tempSelectList1.map(val => { if (val.value !== nowSelect1.value) { if (val && val.value) { newSelectList1.push(val); newSelectValue1.push(val.value); } } }); this.selectList1 = newSelectList1; this.selectValue1 = newSelectValue1; var powSelectList1 = JSON.parse(JSON.stringify(this.powSelectList1)); var newPowSelectList1 = []; var newPowSelectValueList1 = []; if (powSelectList1) { powSelectList1.map(val => { if (val.value !== this.clickItem1.value) { if (val && val.value) { newPowSelectList1.push(val); newPowSelectValueList1.push(val.value); } } }); this.$nextTick(function() { this.powSelectList1 = newPowSelectList1; this.powSelectValueList1 = newPowSelectValueList1; }); } } } } } this.$forceUpdate(); } else if (index == 3) { var select2 = this.clickItem2; var select2Children = select2.children; var childrenValues = []; if (select2Children) { select2Children.map(val => { childrenValues.push(val.value); }); } var level3List = this.selectList3; var level3Value = this.selectValue3; if (this.isContained(level3Value, childrenValues)) { if (select2 && select2.value) { this.selectList2.push(select2); this.selectValue2.push(select2.value); } } else { var isInclude = false; level3Value.map(out => { childrenValues.map(ch => { if (out == ch) { isInclude = true; } }); }); if (isInclude) { var nowSelectList2 = JSON.parse(JSON.stringify(this.selectList2)); var newSelectList2 = []; var newSelectValue2 = []; if (nowSelectList2) { nowSelectList2.map(val => { if (val.value !== select2.value) { if (val && val.value) { newSelectList2.push(val); newSelectValue2.push(val.value); } } }); } this.selectList2 = newSelectList2; this.selectValue2 = newSelectValue2; this.$nextTick(function() { this.powSelectList2.push(select2); this.powSelectValueList2.push(select2.value); }); } else { var tempList2 = JSON.parse(JSON.stringify(this.selectList2)); var newSelectList2 = []; var newSelectValue2 = []; tempList2.map(val => { if (val.value !== select2.value) { if (val && val.value) { newSelectList2.push(val); newSelectValue2.push(val.value); } } }); this.selectList2 = newSelectList2; this.selectValue2 = newSelectValue2; } } } }, isContained: (a, b) => { if (a.length === 0 && b.length === 0) { return false; } if (!(a instanceof Array) || !(b instanceof Array)) return false; if (a.length < b.length) return false; var aStr = a.toString(); for (var i = 0, len = b.length; i < len; i++) { if (aStr.indexOf(b[i]) == -1) return false; } return true; }, /** * @param {Object} index 层级 * @param {Object} item 选择项 */ powSelect(index, item) { this.getParentById(index, item.value); }, getParentById(index, id) { var level1Node = { }; var level2Node = { }; var level3Node = { }; if (index == 1) { //... } else if (index == 2) { var list1 = JSON.parse(JSON.stringify(this.oneList)); list1.map(val => { if (val.children) { val.children.map(node => { if (node.value == id) { level1Node = val; } }); } }); if (level1Node != { }) { if (level1Node && level1Node.value) { this.powSelectList1.push(level1Node); this.powSelectValueList1.push(level1Node.value); } } return level1Node; } else if (index == 3) { var list2 = JSON.parse(JSON.stringify(this.twoList)); list2.map(val => { if (val.children) { val.children.map(node => { if (node.value == id) { level2Node = val; if (val && val.value) { this.powSelectList2.push(val); this.powSelectValueList2.push(val.value); } } }); } }); if (level2Node) { level1Node = this.getParentById(2, level2Node.value); } } }, selectAll(index, item) { if (index == 1) { var node2Children = item.children; node2Children.map(val => { if (val && val.value) { this.selectList2.push(val); this.selectValue2.push(val.value); var node3Children = val.children; node3Children.map(node3 => { this.selectList3.push(node3); this.selectValue3.push(node3.value); }); } }); } else if (index == 2) { var node3Children = item.children; node3Children.map(node3 => { if (node3 && node3.value) { this.selectList3.push(node3); this.selectValue3.push(node3.value); } }); } else if (index == 3) { } }, unSelectAll(index, item) { if (index == 1) { var node1Value = item.value; var tempNode2Array = JSON.parse(JSON.stringify(this.selectList2)); var newNode2Array = []; var newNode2ValueArray = []; var tempNode3Array = JSON.parse(JSON.stringify(this.selectList3)); var newNode3Array = []; var newNode3ValueArray = []; var nowItemChildren = item.children; var haveNodes = []; nowItemChildren.map(val => { haveNodes.push(val.value); if (val.children) { val.children.map(val2 => { haveNodes.push(val2.value); }); } }); tempNode2Array.map(node2 => { if (haveNodes.indexOf(node2.value) === -1) { newNode2Array.push(node2); newNode2ValueArray.push(node2.value); } }); tempNode3Array.map(node3 => { if (haveNodes.indexOf(node3.value) === -1) { newNode3Array.push(node3); newNode3ValueArray.push(node3.value); } }); this.selectList2 = newNode2Array; this.selectValue2 = newNode2ValueArray; this.selectList3 = newNode3Array; this.selectValue3 = newNode3ValueArray; } else if (index == 2) { var tempNode3Array = JSON.parse(JSON.stringify(this.selectList3)); var newNode3Array = []; var newNode3ValueArray = []; var nowItemChildren = item.children; var haveNodes = []; nowItemChildren.map(val => { haveNodes.push(val.value); if (val.children) { val.children.map(val2 => { haveNodes.push(val2.value); }); } }); tempNode3Array.map(node3 => { if (haveNodes.indexOf(node3.value) === -1) { newNode3Array.push(node3); newNode3ValueArray.push(node3.value); } }); this.selectList3 = newNode3Array; this.selectValue3 = newNode3ValueArray; } else if (index == 3) { var tempSelectList3 = JSON.parse(JSON.stringify(this.selectList3)); var select2 = this.clickItem2; var nowSelect = this.clickItem2.children; var nowSelectIds = []; this.clickItem2.children.map(val => { nowSelectIds.push(val.value); }); // if (tempSelectList3.length === 0) { this.powSelectList1 = []; this.powSelectList2 = []; this.powSelectValueList1 = []; this.powSelectValueList2 = []; } else { var oo_select2 = this.clickItem2; var ooSelect2ChidrenList = oo_select2.children; var ooNowSelctList3 = this.selectList3; var ooFlag = false; ooNowSelctList3.map(ooVal => { ooSelect2ChidrenList.map(ooVal2 => { if (ooVal.value === ooVal2.value) { ooFlag = true; } }); }); if (!ooFlag) { var ooPowSelectList2 = JSON.parse(JSON.stringify(this.powSelectList2)); var ooNewPowSelectList2 = []; var ooNewPowSelectValue2 = []; ooPowSelectList2.map(val => { if (val.value !== oo_select2.value) { ooNewPowSelectList2.push(val); ooNewPowSelectValue2.push(val.value); } }); this.$nextTick(function() { this.powSelectList2 = ooNewPowSelectList2; this.powSelectValueList2 = ooNewPowSelectValue2; }); } } } }, checkOneItemHandler(item, index) { var isCf = false; this.selectList1.map(val => { if (val.value === item.value) { isCf = true; } }); if (isCf) { var newOneList = []; this.selectList1.map(val => { if (val.value !== item.value) { newOneList.push(val); } }); this.selectList1 = newOneList; this.unSelectAll(1, item); } else { this.selectList1.push(item); this.selectAll(1, item); } this.$forceUpdate(); }, checkTwoItemHandler(item, index) { var isCf = false; this.selectList2.map(val => { if (val.value === item.value) { isCf = true; } }); if (isCf) { var newTwoList = []; this.selectList2.map(val => { if (val.value !== item.value) { newTwoList.push(val); } }); this.selectList2 = newTwoList; this.unSelectAll(2, item); } else { this.selectList2.push(item); this.selectAll(2, item); this.powSelect(2, item); } this.$forceUpdate(); }, checkThreeItemHandler(item, index) { var isCf = false; this.selectList3.map(val => { if (val.value === item.value) { isCf = true; } }); if (isCf) { var newThreeList = []; this.selectList3.map(val => { if (val.value !== item.value) { newThreeList.push(val); } }); this.selectList3 = newThreeList; this.unSelectAll(3, item); } else { this.selectList3.push(item); this.selectAll(3, item); this.powSelect(3, item); } this.$forceUpdate(); }, // scroll1(e) { this.TopHeight1 = 2; }, scroll2(e) { this.TopHeight2 = 2; }, scroll3(e) { this.TopHeight3 = 2; }, clickOneItemHandler(item, index) { this.clickItem1 = item; this.clickItem2 = { }; this.clickItem3 = { }; if (item && item.children) { this.flashMenu(1, item.children); } else { this.removeMenu(1); this.removeMenu(3); } this.TopHeight2 = 0; this.TopHeight3 = 0; }, clickTwoItemHandler(item, index) { this.clickItem2 = item; this.clickItem3 = { }; if (item && item.children) { this.flashMenu(2, item.children); } else { this.removeMenu(2); } this.TopHeight3 = 0; }, clickThreeItemHandler(item, index) { this.clickItem3 = item; }, removeMenu(index) { if (index === 1) { this.twoList = []; this.threeList = []; } else if (index === 2) { this.threeList = []; } else if (index === 3) { this.threeList = []; } }, /** * @param {Object} index * @param {Object} children */ flashMenu(index, children) { if (children.length === 0 && index == 1) { this.twoList = []; this.threeList = []; } if (index === 1) { if (children) { this.twoList = []; this.twoList = children; if (this.twoList[0] && this.twoList[0].children) { this.clickItem2 = this.twoList[0]; this.flashMenu(2, this.twoList[0].children); } } else { this.removeMenu(2); this.removeMenu(3); } } else if (index === 2) { this.threeList = []; this.threeList = children; } else if (index === 3) { } } } }; </script>
    
    <style> .dict-select-body { display: flex; } .dict-select-block { margin: 2px; border-left: 1px solid gainsboro; padding: 8px; } .dict-select-item { margin-top: 3px; padding-left: 7px; } uni-checkbox .uni-checkbox-wrapper { margin: 2px; } .pow-check > .uni-checkbox-input { background-color: #bfbfbf; } .dict-check-fod { background-color: #adadad; } .dict-select-text { margin-left: 3px; } </style>

## 2.使用 ##

<cxlLevel3Query :dicData="address" @updateData="updateXzqhDm"></cxlLevel3Query>
    //
    import cxlLevel3Query from '@/cxl-level3-query/cxl-level3-query';
    //
    components:{ cxlLevel3Query}

## 3.完整引用 ##

<template>
        <view>
            <cxlLevel3Query :dicData="address" @updateData="updateXzqhDm"></cxlLevel3Query>
        </view>
    </template>
    
    <script> import cxlLevel3Query from '@/cxl-level3-query/cxl-level3-query'; export default { components:{ cxlLevel3Query }, data() { return { address : [{ "value": "110000", "label": "北京", "parentId": "null", "children": [{ "value": "110101", "label": "北京东城区", "parentId": "110000", "id": "110101", "name": "东城区", "code": "110101", "children": [] }, { "value": "110102", "label": "北京西城区", "parentId": "110000", "id": "110102", "name": "西城区", "code": "110102", "children": [] }, { "value": "110103", "label": "北京崇文区", "parentId": "110000", "id": "110103", "name": "崇文区", "code": "110103", "children": [] }, { "value": "110104", "label": "北京宣武区", "parentId": "110000", "id": "110104", "name": "宣武区", "code": "110104", "children": [] }, { "value": "110105", "label": "北京朝阳区", "parentId": "110000", "id": "110105", "name": "朝阳区", "code": "110105", "children": [] }, { "value": "110106", "label": "北京丰台区", "parentId": "110000", "id": "110106", "name": "丰台区", "code": "110106", "children": [] }, { "value": "110107", "label": "北京石景山区", "parentId": "110000", "id": "110107", "name": "石景山区", "code": "110107", "children": [] }, { "value": "110108", "label": "北京海淀区", "parentId": "110000", "id": "110108", "name": "海淀区", "code": "110108", "children": [] }, { "value": "110109", "label": "北京门头沟区", "parentId": "110000", "id": "110109", "name": "门头沟区", "code": "110109", "children": [] }, { "value": "110111", "label": "北京房山区", "parentId": "110000", "id": "110111", "name": "房山区", "code": "110111", "children": [] }, { "value": "110112", "label": "北京通州区", "parentId": "110000", "id": "110112", "name": "通州区", "code": "110112", "children": [] }, { "value": "110113", "label": "北京顺义区", "parentId": "110000", "id": "110113", "name": "顺义区", "code": "110113", "children": [] }, { "value": "110114", "label": "北京昌平区", "parentId": "110000", "id": "110114", "name": "昌平区", "code": "110114", "children": [] }, { "value": "110224", "label": "北京大兴县", "parentId": "110000", "id": "110224", "name": "大兴县", "code": "110224", "children": [] }, { "value": "110226", "label": "北京平谷县", "parentId": "110000", "id": "110226", "name": "平谷县", "code": "110226", "children": [] }, { "value": "110227", "label": "北京怀柔县", "parentId": "110000", "id": "110227", "name": "怀柔县", "code": "110227", "children": [] }, { "value": "110228", "label": "北京密云县", "parentId": "110000", "id": "110228", "name": "密云县", "code": "110228", "children": [] }, { "value": "110229", "label": "北京延庆县", "parentId": "110000", "id": "110229", "name": "延庆县", "code": "110229", "children": [] }], "name": "北京", "id": "110000", "code": "110000" }, { "value": "120000", "label": "天津", "parentId": "null", "children": [{ "value": "120101", "label": "天津和平区", "parentId": "120000", "id": "120101", "name": "和平区", "code": "120101", "children": [] }, { "value": "120102", "label": "天津河东区", "parentId": "120000", "id": "120102", "name": "河东区", "code": "120102", "children": [] }, { "value": "120103", "label": "天津河西区", "parentId": "120000", "id": "120103", "name": "河西区", "code": "120103", "children": [] }, { "value": "120104", "label": "天津南开区", "parentId": "120000", "id": "120104", "name": "南开区", "code": "120104", "children": [] }, { "value": "120105", "label": "天津河北区", "parentId": "120000", "id": "120105", "name": "河北区", "code": "120105", "children": [] }, { "value": "120106", "label": "天津红桥区", "parentId": "120000", "id": "120106", "name": "红桥区", "code": "120106", "children": [] }, { "value": "120107", "label": "天津塘沽区", "parentId": "120000", "id": "120107", "name": "塘沽区", "code": "120107", "children": [] }, { "value": "120108", "label": "天津汉沽区", "parentId": "120000", "id": "120108", "name": "汉沽区", "code": "120108", "children": [] }, { "value": "120109", "label": "天津大港区", "parentId": "120000", "id": "120109", "name": "大港区", "code": "120109", "children": [] }, { "value": "120110", "label": "天津东丽区", "parentId": "120000", "id": "120110", "name": "东丽区", "code": "120110", "children": [] }, { "value": "120111", "label": "天津西青区", "parentId": "120000", "id": "120111", "name": "西青区", "code": "120111", "children": [] }, { "value": "120112", "label": "天津津南区", "parentId": "120000", "id": "120112", "name": "津南区", "code": "120112", "children": [] }, { "value": "120113", "label": "天津北辰区", "parentId": "120000", "id": "120113", "name": "北辰区", "code": "120113", "children": [] }, { "value": "120221", "label": "天津宁河县", "parentId": "120000", "id": "120221", "name": "宁河县", "code": "120221", "children": [] }, { "value": "120222", "label": "天津武清县", "parentId": "120000", "id": "120222", "name": "武清县", "code": "120222", "children": [] }, { "value": "120223", "label": "天津静海县", "parentId": "120000", "id": "120223", "name": "静海县", "code": "120223", "children": [] }, { "value": "120224", "label": "天津宝坻县", "parentId": "120000", "id": "120224", "name": "宝坻县", "code": "120224", "children": [] }, { "value": "120225", "label": "天津蓟县", "parentId": "120000", "id": "120225", "name": "蓟县", "code": "120225", "children": [] }], "name": "天津", "id": "120000", "code": "120000" }] }; }, methods: { updateXzqhDm(e){ console.log('数据',e) } } }; </script>
    
    <style></style>

这里只写了北京和天津的代码数据结构也就这样，其他数据请自行获取

[20200916192633605.gif_pic_center]: /images/20221123/7486591acac94542981a13dcde45e793.png
[https_gitee.com_xl2333_uniapp-cxl-level3-query]: https://gitee.com/xl2333/uniapp-cxl-level3-query