序文：
この機能の実装は数日遅れましたが、上司の協力もあり、ようやく効果が得られました。匿名さん、xxさんに感謝します
1.まず
、省と市のデータを取得する必要がありますが、バックエンドから返されたデータに関係なく、自分で json ファイルを使用する場合は、中国の完全なデータを取得する必要があります。省と都市。参照用に非常に優れた github ソース コードがあります
。, Administrative-divisions-of-China中国の行政区画データは、ここをクリックしてジャンプしてください
都道府県・市区町村の3階層連携データを選択しました
github を読み込むのが難しい場合があります. 完全なデータ構造は下部に添付されています.
2. josn データを取得した後、uniapp の静的フォルダーに新しい ProvinData フォルダーを作成し、新しい ProvinceData.json ファイルを作成します。
不完全、データ多すぎ
3. 次に、使用したいページに導入します
import provinceData from '@/static/provinceData/provinceData.json';
印刷された効果:
4. 次に、uviewplus の u-select コンポーネントへのデータのバインドを開始します。vue3 は u-picke です。ここ
で問題が発生しました。初めての開発で、多くのことを理解していないとしか言えません。u -select は 2x のみです。バージョンのみが利用可能です。私のプロジェクトは vue3 で、3x バージョンが必要です。3x バージョンは u-select ではなく、u-picker セレクターと呼ばれます。
u-select を使用しても効果が現れないことに気づき、uni_modules/uview-plus/components フォルダー内で u-select を探しましたが見つからず、hbuilderx プラグイン マーケットにアクセスして探しました。 uview-plus を検索します。
クリックすると公式サイトのドキュメントへのリンクがありますので
開いてみると、今まで見てきたものはすべて2x版だったことが分かりましたあまり話すと泣きそうです 5. コード解析
：
1. 3x バージョンは、show 属性によって表示と非表示を制御します
2. 列は 2 次元配列を受け取ります。表示する必要がある列の数には、対応する 2 次元配列がいくつかあります 3.
U ピッカーをトリガーして、ここには open は書かれていないので、クリック イベントで data.uselectshow を true に設定するだけです。
<u-picker :show="data.uselectshow" ref="uPicker" :columns="provincelist" @confirm="uPickerconfirm" @change="uPickerchangeHandler" @cancel="uCancel"></u-picker>
import {
reactive, ref } from "vue";
import {
onReady, onLoad } from "@dcloudio/uni-app";
import provinceData from '@/static/provinceData/provinceData.json';
let provincelist = reactive([])
let data = reactive({
uselectshow: false,//是否显示所在地
userInfo: {
city: "",//所在地
},
});
onReady(() => {
// 处理省市区数据结构
dealPrinvceData(provinceData)
})
// 处理省市区数据结构，每一步都打印了，具体截图如下：
function dealPrinvceData(data) {
// 所在地初始化地区，默认第一个城市
console.log(data,'data---1');
provincelist[0] = Object.keys(data); //data作为一个对象，取里面的key组成的数组
console.log(provincelist[0],'2');
provincelist[1] = Object.keys(data[provincelist[0][0]]); //data中第一项key对应的value作为一个对象，取对象中的key组成的数组
console.log(provincelist[1],'3');
provincelist[2] = data[provincelist[0][0]][provincelist[1][0]]; //data中第一项key对应的value中的key对应的value
console.log(provincelist[2],'4');
}
data はラージ オブジェクトであり、province はキーであり、対応する値はその値です。provinlist
[0] はデータのキーを受け取ります。つまり、データのキーで構成される配列を取得します。provinlist[0] は次のように出力されます。プロヴィンスリスト[0]
は実際には次のような配列です。[0: "北京市"、1: "天津市"、2: "河北省"、3: "山西省"、4: "内モンゴル自治区"、5: 「遼寧省」、6:「吉林省」、7:「黒竜江省」、8:「上海市」、9:「江蘇省」、10:「浙江省」、11:「安徽省」、12:「」福建省、13：江西省、14：山東省、15：河南省、16：湖北省、17：湖南省、18：広東省、19：広西チワン族自治区チワン族自治区」、20：「海南省」、21：「重慶市」、22：「四川省」、23：「貴州省」、24：「雲南省」、25：「チベット自治区」、26： 「陝西省」27：「甘粛省」、28：「青海省」、29：「寧夏回族自治区」、30：「新疆ウイグル自治区」】
provincelist[1] は data の最初のキーの値のキーを取得し、provincelist[0][0] は北京の値を取得し、data[provincelist[0][0]] は data['Beijing' ] を参照します。 Object.keys(data[provincelist[0][0]]) は、データ内の北京のキー、つまり市区町村を参照します。
プロヴィンスリスト[1] は次のように出力されます。
プロヴィンスリスト[1] は実際には次のような配列です、[0: "市区町村"]
provincelist[2] はデータの最初のキーの値に対応する値を取得します。つまり、provincelist[0][0] は北京市の値を取得し、[provincelist[1][0] は市区町村の値を取得します。地区、データ[省リスト [0][0]][省リスト[1][0]] はデータです[北京市区]
次のように出力します。provinlist
[2] は実際には次のような配列です。[0: "東城区"、1: "西城区"、2: "朝陽区"、3: "豊台区"、4: "石景山区" 、5：「海淀区」、6：「門頭溝区」、7：「方山区」、8：「通州区」、9：「順義区」、10：「昌平区」、11：「大興区」、 12：「懐柔区」、13：「平谷区」、14：「密雲区」、15：「延慶区」 最初は少し
戸惑い
ましたが、理解してみると実は加工の過程なのですデータ構造、州と市を関連データ
印刷州リストに処理する場合、その構造は次のとおりです:
onready では、レンダリングされたばかりの効果のみが処理されます。列がスクロールされるとき、動的に処理する必要があります。 1列目がスクロールされ、2列目、3列目が変更され、1列目に対応する市区町村に変更されます。
const uPickerchangeHandler = (e) => {
const {
columnIndex,
value,
} = e;
if (columnIndex == 0) {
provincelist[1] = Object.keys(provinceData[value[0]]);
provincelist[2] = provinceData[value[0]][provincelist[1][0]];
}
if (columnIndex == 1) {
provincelist[2] = provinceData[value[0]][value[1]];
}
};
1. 値を出力する形式は次のとおりです。最初の列をスクロールすると、2 番目と 3 番目の列は変更されていません。value[0] のみを取得します。つまり、最初の列の変更された値を取得します。Object.keys(
プロヴィンスデータ [値[0]]) 変換は、オブジェクトとして対応する省を取得し、オブジェクト内のキーで構成される配列を取得することです。例として、天津市、河北省、山西省のスクリーンショットを取ると、値
はprovincelist[1] によって出力される内容は次のとおりです:
市区町村の取得 リンケージ データの後に、地区のリンケージ データも取得する必要があります。 ]; 翻訳は、provinceData[xx 州 xx city] で、最初の列はスクロールします。その時点で、市と地区は最初の都市に対応するデータを取得しました。
2 番目の列がスクロールする場合は、別の都市を選択することを意味します。このとき、対応する地区のデータを変更する必要があります。値の 0 番目と 1 番目の項目は両方とも正しいです。直接取得するだけです。
if (columnIndex == 1) {
provincelist[2] = provinceData[value[0]][value[1]];
}
最終効果:
完全な josn データ:
{
"北京市": {
"市辖区": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区",
"密云区", "延庆区"
]
},
"天津市": {
"市辖区": ["和平区", "河东区", "河西区", "南开区", "河北区", "红桥区", "东丽区", "西青区", "津南区", "北辰区", "武清区", "宝坻区", "滨海新区", "宁河区",
"静海区", "蓟州区"
]
},
"河北省": {
"石家庄市": ["长安区", "桥西区", "新华区", "井陉矿区", "裕华区", "藁城区", "鹿泉区", "栾城区", "井陉县", "正定县", "行唐县", "灵寿县", "高邑县", "深泽县",
"赞皇县", "无极县", "平山县", "元氏县", "赵县", "石家庄高新技术产业开发区", "石家庄循环化工园区", "辛集市", "晋州市", "新乐市"
],
"唐山市": ["路南区", "路北区", "古冶区", "开平区", "丰南区", "丰润区", "曹妃甸区", "滦南县", "乐亭县", "迁西县", "玉田县", "河北唐山芦台经济开发区", "唐山市汉沽管理区",
"唐山高新技术产业开发区", "河北唐山海港经济开发区", "遵化市", "迁安市", "滦州市"
],
"秦皇岛市": ["海港区", "山海关区", "北戴河区", "抚宁区", "青龙满族自治县", "昌黎县", "卢龙县", "秦皇岛市经济技术开发区", "北戴河新区"],
"邯郸市": ["邯山区", "丛台区", "复兴区", "峰峰矿区", "肥乡区", "永年区", "临漳县", "成安县", "大名县", "涉县", "磁县", "邱县", "鸡泽县", "广平县", "馆陶县",
"魏县", "曲周县", "邯郸经济技术开发区", "邯郸冀南新区", "武安市"
],
"邢台市": ["襄都区", "信都区", "任泽区", "南和区", "临城县", "内丘县", "柏乡县", "隆尧县", "宁晋县", "巨鹿县", "新河县", "广宗县", "平乡县", "威县", "清河县",
"临西县", "河北邢台经济开发区", "南宫市", "沙河市"
],
"保定市": ["竞秀区", "莲池区", "满城区", "清苑区", "徐水区", "涞水县", "阜平县", "定兴县", "唐县", "高阳县", "容城县", "涞源县", "望都县", "安新县", "易县",
"曲阳县", "蠡县", "顺平县", "博野县", "雄县", "保定高新技术产业开发区", "保定白沟新城", "涿州市", "定州市", "安国市", "高碑店市"
],
"张家口市": ["桥东区", "桥西区", "宣化区", "下花园区", "万全区", "崇礼区", "张北县", "康保县", "沽源县", "尚义县", "蔚县", "阳原县", "怀安县", "怀来县",
"涿鹿县", "赤城县", "张家口经济开发区", "张家口市察北管理区", "张家口市塞北管理区"
],
"承德市": ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "兴隆县", "滦平县", "隆化县", "丰宁满族自治县", "宽城满族自治县", "围场满族蒙古族自治县", "承德高新技术产业开发区",
"平泉市"
],
"沧州市": ["新华区", "运河区", "沧县", "青县", "东光县", "海兴县", "盐山县", "肃宁县", "南皮县", "吴桥县", "献县", "孟村回族自治县", "河北沧州经济开发区",
"沧州高新技术产业开发区", "沧州渤海新区", "泊头市", "任丘市", "黄骅市", "河间市"
],
"廊坊市": ["安次区", "广阳区", "固安县", "永清县", "香河县", "大城县", "文安县", "大厂回族自治县", "廊坊经济技术开发区", "霸州市", "三河市"],
"衡水市": ["桃城区", "冀州区", "枣强县", "武邑县", "武强县", "饶阳县", "安平县", "故城县", "景县", "阜城县", "河北衡水高新技术产业开发区", "衡水滨湖新区", "深州市"]
},
"山西省": {
"太原市": ["小店区", "迎泽区", "杏花岭区", "尖草坪区", "万柏林区", "晋源区", "清徐县", "阳曲县", "娄烦县", "山西转型综合改革示范区", "古交市"],
"大同市": ["新荣区", "平城区", "云冈区", "云州区", "阳高县", "天镇县", "广灵县", "灵丘县", "浑源县", "左云县", "山西大同经济开发区"],
"阳泉市": ["城区", "矿区", "郊区", "平定县", "盂县"],
"长治市": ["潞州区", "上党区", "屯留区", "潞城区", "襄垣县", "平顺县", "黎城县", "壶关县", "长子县", "武乡县", "沁县", "沁源县"],
"晋城市": ["城区", "沁水县", "阳城县", "陵川县", "泽州县", "高平市"],
"朔州市": ["朔城区", "平鲁区", "山阴县", "应县", "右玉县", "山西朔州经济开发区", "怀仁市"],
"晋中市": ["榆次区", "太谷区", "榆社县", "左权县", "和顺县", "昔阳县", "寿阳县", "祁县", "平遥县", "灵石县", "介休市"],
"运城市": ["盐湖区", "临猗县", "万荣县", "闻喜县", "稷山县", "新绛县", "绛县", "垣曲县", "夏县", "平陆县", "芮城县", "永济市", "河津市"],
"忻州市": ["忻府区", "定襄县", "五台县", "代县", "繁峙县", "宁武县", "静乐县", "神池县", "五寨县", "岢岚县", "河曲县", "保德县", "偏关县", "五台山风景名胜区",
"原平市"
],
"临汾市": ["尧都区", "曲沃县", "翼城县", "襄汾县", "洪洞县", "古县", "安泽县", "浮山县", "吉县", "乡宁县", "大宁县", "隰县", "永和县", "蒲县", "汾西县",
"侯马市", "霍州市"
],
"吕梁市": ["离石区", "文水县", "交城县", "兴县", "临县", "柳林县", "石楼县", "岚县", "方山县", "中阳县", "交口县", "孝义市", "汾阳市"]
},
"内蒙古自治区": {
"呼和浩特市": ["新城区", "回民区", "玉泉区", "赛罕区", "土默特左旗", "托克托县", "和林格尔县", "清水河县", "武川县", "呼和浩特经济技术开发区"],
"包头市": ["东河区", "昆都仑区", "青山区", "石拐区", "白云鄂博矿区", "九原区", "土默特右旗", "固阳县", "达尔罕茂明安联合旗", "包头稀土高新技术产业开发区"],
"乌海市": ["海勃湾区", "海南区", "乌达区"],
"赤峰市": ["红山区", "元宝山区", "松山区", "阿鲁科尔沁旗", "巴林左旗", "巴林右旗", "林西县", "克什克腾旗", "翁牛特旗", "喀喇沁旗", "宁城县", "敖汉旗"],
"通辽市": ["科尔沁区", "科尔沁左翼中旗", "科尔沁左翼后旗", "开鲁县", "库伦旗", "奈曼旗", "扎鲁特旗", "通辽经济技术开发区", "霍林郭勒市"],
"鄂尔多斯市": ["东胜区", "康巴什区", "达拉特旗", "准格尔旗", "鄂托克前旗", "鄂托克旗", "杭锦旗", "乌审旗", "伊金霍洛旗"],
"呼伦贝尔市": ["海拉尔区", "扎赉诺尔区", "阿荣旗", "莫力达瓦达斡尔族自治旗", "鄂伦春自治旗", "鄂温克族自治旗", "陈巴尔虎旗", "新巴尔虎左旗", "新巴尔虎右旗", "满洲里市",
"牙克石市", "扎兰屯市", "额尔古纳市", "根河市"
],
"巴彦淖尔市": ["临河区", "五原县", "磴口县", "乌拉特前旗", "乌拉特中旗", "乌拉特后旗", "杭锦后旗"],
"乌兰察布市": ["集宁区", "卓资县", "化德县", "商都县", "兴和县", "凉城县", "察哈尔右翼前旗", "察哈尔右翼中旗", "察哈尔右翼后旗", "四子王旗", "丰镇市"],
"兴安盟": ["乌兰浩特市", "阿尔山市", "科尔沁右翼前旗", "科尔沁右翼中旗", "扎赉特旗", "突泉县"],
"锡林郭勒盟": ["二连浩特市", "锡林浩特市", "阿巴嘎旗", "苏尼特左旗", "苏尼特右旗", "东乌珠穆沁旗", "西乌珠穆沁旗", "太仆寺旗", "镶黄旗", "正镶白旗", "正蓝旗", "多伦县",
"乌拉盖管理区管委会"
],
"阿拉善盟": ["阿拉善左旗", "阿拉善右旗", "额济纳旗", "内蒙古阿拉善高新技术产业开发区"]
},
"辽宁省": {
"沈阳市": ["和平区", "沈河区", "大东区", "皇姑区", "铁西区", "苏家屯区", "浑南区", "沈北新区", "于洪区", "辽中区", "康平县", "法库县", "新民市"],
"大连市": ["中山区", "西岗区", "沙河口区", "甘井子区",