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

文章目录

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

0.演示

git地址： 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"><checkboxv-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"><checkboxv-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>

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

uniapp-手写三级地区选择实现相关推荐

uniapp手写自定义弹窗
uniapp手写自定义弹窗弹窗这种东西真的是太常见了常见到烂大街但是每个平台的弹窗都不太一样样式不统一就不怎么好看像把代码编译到安卓端然后就- 哎不说了安卓离苹果的距离还是很远的这里只限 ...
UNIAPP手写签名
uniapp手写签名 HTML <template><view ><canvas class="mycanvas" canvas-id="m ...
js三级地区选择插件，省市县级联下拉列表
js三级地区选择插件,省市县级联下拉列表 3级省地市级联菜单,ie/ff 测试通过,支持多个并存,支持事件 demo1为最简单的一份实现,页面id配置需在js文件中写入,适合简单情况 demo2增加了 ...
uniapp手写购物车单选全选反选
uniapp手写购物车单选全选反选这里是用图片切换的方法显示没有用到 checkbox 单选选项图片判断切换全选选项图片判断切换这里是用图片切换的方法显示没有用到 checkbox ...
uniapp手写_手写签名
前言: 简单的手写签名参考 https://www.auiaa.com/fron/uni/2019-03-17/103.html 的例子,进行了修改主要代码 @touchcancel='cance ...
uni-app手写签名并上传七牛云
创建canvas <view class="signature"><canvas class="mycanvas" canvas-id=&qu ...
uniapp 手写签名组件
组件地址: 手写签名组件,弹框签名,可配置签名,签名返回base64,签名专用 - DCloud 插件市场 # 欢迎使用手写签名组件 **手写签名组件,签名后可以获取到base64编码,同时内置了弹 ...
uniapp手写_【转】uni-app框架纯手写微信小程序开发左侧滑动菜单
本帖最后由 fengrui99 于 2020-7-22 14:38 编辑原文来自:在学习的uni-app的微信小程序开发路上慢慢开始不一直依赖插件(但是使用插件是真的香,一直用一直香) 在大佬的指引 ...
uniapp手写_uni-app框架纯手写微信小程序开发左侧滑动菜单
原来到最后才发现有些东西,没有就真的没有.不行,就真的不行唠叨一会在学习的uni-app的微信小程序开发路上慢慢开始不一直依赖插件(但是使用插件是真的香,一直用一直香),在大佬的指引下学会自己去写 ...
手写一个二级选择框联动
(图一) (图二) 如上图所示,当选择类型时,阶段选择内部需要显示该类型里面的阶段. 大概可以这样子理解: {类型1:{阶段M: XXX},类型2:{阶段N: XXX,阶段E: XXX} } 代码分析 ...

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

文章目录

0.演示

1.插件代码

2.使用

3.完整引用

uniapp-手写三级地区选择实现相关推荐

最新文章

热门文章