行政区划代码 JS转树形层级格式

文章介绍了一个Vue组件,用于读取和处理Excel文件,特别是行政区划代码数据。当上传.xlxs或.xls文件后,组件使用XLSX库解析内容,转换为JSON结构,并进行层级关系构建,适用于树形展示。注意,台湾、香港和澳门特别行政区信息暂缺。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

行政区划代码
2022版本三沙市下面二个区没有编码需要自行删除
注:1.台湾省、香港特别行政区和澳门特别行政区暂缺地市和区县信息

<template>
    <div>
        <div style="color:red"><input type="file" @change="readFile" accept=".xlsx, .xls">
        </div>
    </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
    name: 'VmsWebTest',

    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {
        readFile(e) {//上传文件后读取excel文件内容
            let file = e.target.files[0];
            const types = ["xlsx", "xls"];
            const arr = file.name.split(".");
            //判断文件是否为excel文件
            if (!types.find(item => item === arr[arr.length - 1])) {
                alert('请选择正确的文件类型');
                return;
            }
            let reader = new FileReader();
            //启动函数
            reader.readAsBinaryString(file);
            reader.onload = e => {
                console.log(e);
                //workbook存放excel的所有基本信息
                let workbook = XLSX.read(e.target.result, { type: "binary", cellDates: true });
                //定义sheetList中存放excel表格的sheet表,就是最下方的tab
                let sheetList = workbook.SheetNames;
                //读取文件内容,(第一个sheet里的内容)
                let json = XLSX.utils.sheet_to_json(workbook.Sheets[sheetList[0]],);
                console.log(json);
                this.jsontree(json)
            }
        },
        jsontree(arr) {
            arr.forEach(item => {
                item.id += ''
                if (item.id.indexOf('0000') != -1) {
                    item.parentId = 0
                } else if (item.id.indexOf('00') != -1) {
                    item.parentId = item.id.slice(0, 2) + '0000'
                } else {
                    if (item.id.slice(0, 4)=='1101' || item.id.slice(0, 4)=='1201') {
                        item.parentId = item.id.slice(0, 2) + '0000'
                    } else {
                        item.parentId = item.id.slice(0, 4) + '00'
                    }
                }
            });
            let data = this.handleTree(arr, 'id')
            console.log(data);
        },
          handleTree(data, id, parentId, children, rootId) {
			id = id || 'id'
			parentId = parentId || 'parentId'
			children = children || 'children'
			rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
			//对源数据深度克隆
			const cloneData = JSON.parse(JSON.stringify(data))
			//循环所有项
			const treeData = cloneData.filter(father => {
				let branchArr = cloneData.filter(child => {
					//返回每一项的子级数组
					return father[id] === child[parentId]
				});
				branchArr.length > 0 ? father.children = branchArr : '';
				//返回第一层
				return father[parentId] === rootId;
			});
			return treeData != '' ? treeData : data;
		}

    },
};
</script>

<style lang="scss" scoped></style>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值