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

相关文章

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》:本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv

C++ RabbitMq消息队列组件详解

《C++RabbitMq消息队列组件详解》:本文主要介绍C++RabbitMq消息队列组件的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. RabbitMq介绍2. 安装RabbitMQ3. 安装 RabbitMQ 的 C++客户端库4. A

Linux查看系统盘和SSD盘的容量、型号及挂载信息的方法

《Linux查看系统盘和SSD盘的容量、型号及挂载信息的方法》在Linux系统中,管理磁盘设备和分区是日常运维工作的重要部分,而lsblk命令是一个强大的工具,它用于列出系统中的块设备(blockde... 目录1. 查看所有磁盘的物理信息方法 1:使用 lsblk(推荐)方法 2:使用 fdisk -l(

Python中合并列表(list)的六种方法小结

《Python中合并列表(list)的六种方法小结》本文主要介绍了Python中合并列表(list)的六种方法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋... 目录一、直接用 + 合并列表二、用 extend() js方法三、用 zip() 函数交叉合并四、用