前端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和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

Python进阶之列表推导式的10个核心技巧

《Python进阶之列表推导式的10个核心技巧》在Python编程中,列表推导式(ListComprehension)是提升代码效率的瑞士军刀,本文将通过真实场景案例,揭示列表推导式的进阶用法,希望对... 目录一、基础语法重构:理解推导式的底层逻辑二、嵌套循环:破解多维数据处理难题三、条件表达式:实现分支

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指

把Python列表中的元素移动到开头的三种方法

《把Python列表中的元素移动到开头的三种方法》在Python编程中,我们经常需要对列表(list)进行操作,有时,我们希望将列表中的某个元素移动到最前面,使其成为第一项,本文给大家介绍了把Pyth... 目录一、查找删除插入法1. 找到元素的索引2. 移除元素3. 插入到列表开头二、使用列表切片(Lis

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