admin 管理员组

文章数量: 887006

vue递归组件实现

需求：需要显示不确定层级不确定值类型（可能是数组里有对象，对象里有数据）的数据

数据结构如下：

{"company":{"name":"9206-6737 QUéBEC INC.","company_number":"1165695314","jurisdiction_code":"ca_qc","incorporation_date":"2009-02-18","dissolution_date":null,"company_type":"Société par actions ou compagnie","registry_url":null,"branch":null,"branch_status":null,"inactive":false,"current_status":"Immatriculée","created_at":"2012-09-27T18:45:51+00:00","updated_at":"2016-07-17T05:49:20+00:00","retrieved_at":"2016-02-24T07:04:39+00:00","5verify_url":"","previous_names":[],"source":{"publisher":"Quebec Registraire des entreprises","url":"","retrieved_at":"2016-02-24T07:04:39+00:00"},"registered_address":{"street_address":"241 rue Jarry E Montréal (Québec) H2P1T6 Canada","locality":null,"region":null,"postal_code":null,"country":"Canada"},"registered_address_in_full":"241 rue Jarry E Montréal (Québec) H2P1T6 Canada","industry_codes":[{"industry_code":{"code":"6012","description":null,"code_scheme_id":"ca_qc_cae","code_scheme_name":"Québec Economic Activity Classification","uid":"ca_qc_cae-6012"}}],"restricted_for_marketing":null,"native_company_number":null}}

递归组件封装如下（因为框架原因只有使用template的写法，大家灵活搬运代码哈

）：

var dataTreeComponent = {template: `<div class="dataTree"><div class="dataTreeArr" v-if="judgeArr(treedata)"><div v-for="(value,index) in treedata" :key="index"><data-tree v-if="value" :treedata="value"></data-tree></div></div><div class="dataTreeArr" v-else-if="judgeObject(treedata)"><div v-for="(value,key,index) in treedata" :key="index" class="dataTreeItem"><div class="dataTreeTitle inline-block">{{showName(key)}} :</div><div class="dataTreeValue inline-block" :class="judgeArr(value)||judgeObject(value)?'dataTreeMultipleItem':'dataTreeSingleItem'"><data-tree v-if="value" :treedata="value"></data-tree></div></div></div><div v-else><div>{{treedata}}</div></div></div>`,name: 'dataTree',props:{treedata:{default:function(){return []}}},data: function() {return {nameChObj:{name: '公司名称',company_number: '公司编号',jurisdiction_code: '公司辖区',company_type: '公司类型',current_status: '当前状态',incorporation_date: '创立时间',dissolution_date: '解散时间',inactive: '是否停业','5verify_url': '保留字',previous_names: '曾用名',alternative_names: '其他名称',alternate_registration_entities: '其他注册地',previous_registration_entities: '曾经注册的实体',subsequent_registration_entities: '分之机构信息',fregistered_address_in_full: '详细注册地址',registered_address: '注册地址',industry_codes: '经营范围',identifiers: '各类编号',registry_url: '网址',controlling_entity: '实际控制人',ultimate_beneficial_owners: '实际受益人',branch: '分支机构',branch_status: '分支机构状态',home_company: '留守公司信息'}}},methods: {showName(str) {if (str&&this.nameChObj[str]) {return this.nameChObj[str]} else {return str}},judgeArr(val) {let temp = val instanceof Arrayreturn temp},judgeObject(val) {let temp = val instanceof Objectreturn temp}},created: function() {}
}

 

本文标签： vue递归组件实现

版权声明：本文标题：vue递归组件实现 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732356436h1534565.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。