前端Vue仿企查查天眼查高管信息列表组件

本文主要是介绍前端Vue仿企查查天眼查高管信息列表组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件化开发,可以有效地实现单独开发,单独维护,而且它们之间可以随意的进行组合。大大提升了开发的效率,降低了维护的成本。

本文将介绍一款组件:前端Vue仿企查查天眼查高管信息列表组件,

阅读全文下载完整组件代码请关注微信公众号: 前端组件开发

效果图如下:

# cc-seniorListView

#### 使用方法

```使用方法

<!-- 仿企查查天眼查高管信息列表组件 seniorList:高管数组信息 -->

<cc-seniorListView :seniorList="seniorList"></cc-seniorListView>

```

#### HTML代码实现部分

```html

<template>

<view class="content">

<div class="mui-content-padded">

<!-- 仿企查查天眼查高管信息列表组件 seniorList:高管数组信息 -->

<cc-seniorListView :seniorList="seniorList"></cc-seniorListView>

</div>

</view>

</template>

<script>

export default {

data() {

return {

seniorList: [],

uptextArr: ['1', "2", "3", "4", '5'],

downTextArr: ['国家标准', "行业标准", "省级标准", "团体标准", '企业标准'],

selIndex: "0",

}

},

mounted() {

this.seniorList = [{

"id": "3",

"isNewRecord": false,

"socialCode": "123456",

"comCode": "123456",

"comName": "高管公司",

"personId": "125",

"personName": "李娅云",

"personNameEn": "c",

"resume": "京东集团首席合规官,监督合规、法律事务及内部审计以及信息安全。李女士于2007年12月加入京东。担任目前职位之前,李女士担任合规管理部副总裁,基于对假冒产品「零容忍」政策制定了一项强烈的道德与合规计划,通过推出防欺诈培训、举报方案及内部欺诈调查框架,推广全公司诚信文化。李女士亦负责建立有效的合规及内部控制,以满足美国上市的要求。在担任合规职位之前,李女士担任法律团队的负责人。李女士持有中国人民大学法学硕士学位及中欧国际工商学院电子商务管理硕士学位。2020年12月21日,京东集团发布人员任命公告称,京东集团首席合规官李娅云将接任京东数字科技CEO,向京东集团CEO刘强东汇报。",

"job": "高层管理",

"sex": "女",

"salary": "900000",

"education": "本科",

"shares": "13%",

"tenure": "3年",

"publichTime": "2023-08-23",

"tag": "股权出质",

"comNum": "3",

"sortNum": "3",

"updateTime": "3",

"remark": "3"

},

{

"id": "3",

"isNewRecord": false,

"socialCode": "123456",

"comCode": "123456",

"comName": "京东公司",

"personId": "125",

"personName": "余睿",

"personNameEn": "c",

"resume": "余睿,男,1982年出生,先后取得中国政法大学法学学士学位、中欧国际工商学院高级工商管理硕士(EMBA)学位,中国国籍。余睿先生于2008年7月加入京东集团,曾于京东集团担任多个管理职位(包括零售及物流业务);2011年1月至2015年5月先后担任京东物流华中区域及华东区域负责人,协助京东物流在中国各地开展业务;2016年6月至2018年3月曾担任1号店首席执行官,随后自2018年3月至2019年2月担任京东集团客户体验与服务部负责人;2019年2月至2020年12月,其亦担任京东集团首席人力资源官。余睿先生现担任京东物流执行董事兼首席执行官。此简介更新于2022-10-18",

"job": "高层管理",

"sex": "男",

"salary": "900000",

"education": "硕士",

"shares": "6%",

"tenure": "3年",

"publichTime": "2023-08-23",

"tag": "股权出质",

"comNum": "3",

"sortNum": "3",

"updateTime": "3",

"remark": "3"

},

];

},

methods: {

// 按钮点击事件

menuClick(tag) {

// 点击序列赋值

this.selIndex = tag;

}

}

}

</script>

<style>

page {

background: #f3f4f6;

}

.content {

display: flex;

flex-direction: column;

}

.mui-content-padded {

margin: 0px 14px;

}

.bottomV {

/* 设置视图置顶 */

display: flex;

flex-direction: row;

position: fixed;

margin-top: calc(100vh - 168px);

height: 60px;

z-index: 9999 !important;

width: 100vw;

background-color: white;

padding-left: 0px;

padding-bottom: 20px;

}

</style>

```

这篇关于前端Vue仿企查查天眼查高管信息列表组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/244405

相关文章

SQL Server跟踪自动统计信息更新实战指南

《SQLServer跟踪自动统计信息更新实战指南》本文详解SQLServer自动统计信息更新的跟踪方法,推荐使用扩展事件实时捕获更新操作及详细信息,同时结合系统视图快速检查统计信息状态,重点强调修... 目录SQL Server 如何跟踪自动统计信息更新:深入解析与实战指南 核心跟踪方法1️⃣ 利用系统目录

python中列表应用和扩展性实用详解

《python中列表应用和扩展性实用详解》文章介绍了Python列表的核心特性:有序数据集合,用[]定义,元素类型可不同,支持迭代、循环、切片,可执行增删改查、排序、推导式及嵌套操作,是常用的数据处理... 目录1、列表定义2、格式3、列表是可迭代对象4、列表的常见操作总结1、列表定义是处理一组有序项目的

C++11范围for初始化列表auto decltype详解

《C++11范围for初始化列表autodecltype详解》C++11引入auto类型推导、decltype类型推断、统一列表初始化、范围for循环及智能指针,提升代码简洁性、类型安全与资源管理效... 目录C++11新特性1. 自动类型推导auto1.1 基本语法2. decltype3. 列表初始化3

Olingo分析和实践之OData框架核心组件初始化(关键步骤)

《Olingo分析和实践之OData框架核心组件初始化(关键步骤)》ODataSpringBootService通过初始化OData实例和服务元数据,构建框架核心能力与数据模型结构,实现序列化、URI... 目录概述第一步:OData实例创建1.1 OData.newInstance() 详细分析1.1.1

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》:本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动