前端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

相关文章

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

在C#中获取端口号与系统信息的高效实践

《在C#中获取端口号与系统信息的高效实践》在现代软件开发中,尤其是系统管理、运维、监控和性能优化等场景中,了解计算机硬件和网络的状态至关重要,C#作为一种广泛应用的编程语言,提供了丰富的API来帮助开... 目录引言1. 获取端口号信息1.1 获取活动的 TCP 和 UDP 连接说明:应用场景:2. 获取硬

SpringBoot使用Apache Tika检测敏感信息

《SpringBoot使用ApacheTika检测敏感信息》ApacheTika是一个功能强大的内容分析工具,它能够从多种文件格式中提取文本、元数据以及其他结构化信息,下面我们来看看如何使用Ap... 目录Tika 主要特性1. 多格式支持2. 自动文件类型检测3. 文本和元数据提取4. 支持 OCR(光学

C#实现获取电脑中的端口号和硬件信息

《C#实现获取电脑中的端口号和硬件信息》这篇文章主要为大家详细介绍了C#实现获取电脑中的端口号和硬件信息的相关方法,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 我们经常在使用一个串口软件的时候,发现软件中的端口号并不是普通的COM1,而是带有硬件信息的。那么如果我们使用C#编写软件时候,如

Python实现将实体类列表数据导出到Excel文件

《Python实现将实体类列表数据导出到Excel文件》在数据处理和报告生成中,将实体类的列表数据导出到Excel文件是一项常见任务,Python提供了多种库来实现这一目标,下面就来跟随小编一起学习一... 目录一、环境准备二、定义实体类三、创建实体类列表四、将实体类列表转换为DataFrame五、导出Da

通过C#获取PDF中指定文本或所有文本的字体信息

《通过C#获取PDF中指定文本或所有文本的字体信息》在设计和出版行业中,字体的选择和使用对最终作品的质量有着重要影响,然而,有时我们可能会遇到包含未知字体的PDF文件,这使得我们无法准确地复制或修改文... 目录引言C# 获取PDF中指定文本的字体信息C# 获取PDF文档中用到的所有字体信息引言在设计和出

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

基于Qt Qml实现时间轴组件

《基于QtQml实现时间轴组件》时间轴组件是现代用户界面中常见的元素,用于按时间顺序展示事件,本文主要为大家详细介绍了如何使用Qml实现一个简单的时间轴组件,需要的可以参考下... 目录写在前面效果图组件概述实现细节1. 组件结构2. 属性定义3. 数据模型4. 事件项的添加和排序5. 事件项的渲染如何使用