With the continuous development of technology, traditional development methods make the system more and more complex. In the traditional development process, a small change or the addition of a small function may lead to a modification of the overall logic, causing a situation where the entire system is affected. In order to solve this problem, we adopted a component development model. Through component development, individual development and maintenance can be effectively achieved, and they can be combined at will. It greatly improves development efficiency and reduces maintenance costs.
This article will introduce a component: the front-end Vue imitation enterprise Chacha Tianyancha executive information list component, with the complete code download address: https://ext.dcloud.net.cn/plugin?id=14191
For more information on front-end components, please follow the WeChat public account: Front-end component development
The renderings are as follows:
# cc-seniorListView
#### Instructions
```How to use
<!-- Imitation enterprise Chacha Tianyancha senior executive information list component seniorList: senior executive array information -->
<cc-seniorListView :seniorList="seniorList"></cc-seniorListView>
```
#### HTML code implementation part
```html
<template>
<view class="content">
<div class="mui-content-padded">
<!-- Imitation enterprise Chacha Tianyancha senior executive information list component seniorList: senior executive array information -->
<cc-seniorListView :seniorList="seniorList"></cc-seniorListView>
</div>
</view>
</template>
<script>
export default {
data() {
return {
seniorList: [],
uptextArr: ['1', "2", "3", "4", '5'],
downTextArr: ['National Standard', "Industry Standard", "Provincial Standard", "Group Standard", 'Enterprise Standard'],
selIndex: "0",
}
},
mounted() {
this.seniorList = [{
"id": "3",
"isNewRecord": false,
"socialCode": "123456",
"comCode": "123456",
"comName": "Executive Company",
"personId": "125",
"personName": "李亚云",
"personNameEn": "c",
"resume": "Chief Compliance Officer of JD.com Group, overseeing compliance, legal affairs and internal auditing, and information security. Ms. Li joined JD.com in December 2007. Before assuming her current position, Ms. Li served as Vice President of the Compliance Management Department. A strong ethics and compliance program based on a "zero tolerance" policy for counterfeit products has been developed to promote a company-wide culture of integrity through the launch of fraud prevention training, whistleblowing programs and an internal fraud investigation framework. Ms. Li is also responsible for establishing effective compliance and internal controls to meet US listing requirements. Prior to her compliance role, Ms. Li served as the head of the legal team. Ms. Li holds a master's degree in law from Renmin University of China and a master's degree in e-commerce management from China Europe International Business School. On December 21, 2020, JD Group issued a personnel appointment announcement stating that Li Yayun, chief compliance officer of JD Group, will take over as CEO of JD Digital Technology and report to JD Group CEO Liu Qiangdong. ",
"job": "senior management",
"sex": "女",
"salary": "900000",
"education": "undergraduate",
"shares": "13%",
"tenure": "3年",
"publichTime": "2023-08-23",
"tag": "Equity pledge",
"comNum": "3",
"sortNum": "3",
"updateTime": "3",
"remark": "3"
},
{
"id": "3",
"isNewRecord": false,
"socialCode": "123456",
"comCode": "123456",
"comName": "Jingdong Company",
"personId": "125",
"personName": "余睿",
"personNameEn": "c",
"resume": "Yu Rui, male, born in 1982, has a bachelor's degree in law from China University of Political Science and Law and an executive master's degree in business administration (EMBA) from China Europe International Business School. He is Chinese nationality. Mr. Yu Rui joined JD.com in July 2008 , held various management positions in JD Group (including retail and logistics business); from January 2011 to May 2015, he served as the head of JD Logistics’ Central China Region and East China Region, assisting JD Logistics in developing business across China; in 2016 He served as the CEO of Yihaodian from June to March 2018, and then served as the head of the customer experience and service department of JD.com from March 2018 to February 2019; from February 2019 to December 2020, he also served as Served as the Chief Human Resources Officer of JD Group. Mr. Yu Rui currently serves as the Executive Director and CEO of JD Logistics. This profile was updated on 2022-10-18",
"job": "senior management",
"sex": "男",
"salary": "900000",
"education": "Master's degree",
"shares": "6%",
"tenure": "3年",
"publichTime": "2023-08-23",
"tag": "Equity pledge",
"comNum": "3",
"sortNum": "3",
"updateTime": "3",
"remark": "3"
},
];
},
methods: {
//Button click event
menuClick(tag) {
//Click sequence assignment
this.selIndex = tag;
}
}
}
</script>
<style>
page {
background: #f3f4f6;
}
.content {
display: flex;
flex-direction: column;
}
.mui-content-padded {
margin: 0px 14px;
}
.bottomV {
/* Set the view to the top */
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>
```