最新のフロントエンドは、4レベル以下の株式構造、模倣企業ChachaとTianyancha系列の投資機関、ツリーツリー構造の保有構造をサポートしています。

テクノロジーの発展に伴い、開発の複雑さはますます高くなっており、従来の開発手法ではシステム全体をアプリケーションとして構築していましたが、小さな変更や小さな機能の追加によって全体のロジックが変わってしまうことがよくありました。この変更は体全体に影響を与えます。コンポーネント開発により、個別の開発と保守を効率的に実行でき、それらを自由に組み合わせることができます。低い開発効率を大幅に改善し、メンテナンスコストを削減します。

コンポーネント化は、複数の反復を経た複雑なビジネスシナリオや製品を含むフロントエンドアプリケーションにとって唯一の方法です。コンポーネント化には、表面的に見えるモジュールの分割や分離だけではなく、ビジネス特性に基づいたモジュール分割戦略、モジュール間の対話方法、システムの構築など、コンポーネント化をサポートするための裏での多くの作業が必要です。

この記事で紹介するコンポーネントは次のとおりです。

vue uni-app フロントエンドの 4 レベル以下の構造に対する最新のサポートを迅速に実装し、Qichacha と Tianyancha の関連投資機関の株式構造、ツリー構造保持構造を模倣します。ダウンロードするには、uni-app プラグインマーケットにアクセスしてください。 : フロントエンドの最新の 4 レベル以下の構造のサポート Fengqi Chacha と Tianyancha の関連投資機関の株式構造、ツリーツリー構造の保有構造 - DCloud プラグイン市場フロントエンドが新たに 4 レベル以下をサポート構造、Fengqi Chacha と Tianyancha の関連投資機関の株式構造、ツリー構造の保有構造、このコンポーネントは、関連投資構造、株式構造、ツリー構造、保有構造を表示するために使用されます https://ext.dcloud 。 net.cn/plugin?id=14827

フロントエンドコンポーネントの詳細については、WeChat パブリックアカウントをフォローしてください: フロントエンドコンポーネント開発

レンダリングは次のとおりです。

＃フロントエンド模倣企業チャチャ、ティアンヤンチャ関連投資機関株式構造ツリー構造保有構造

#### 使い方
``` 使い方

<CCBCashTree v-if="(curTreeName.length > 0)" :treeName="curTreeName" :treeData="curTreeData " >
       </CCBCashTree>

「」

#### HTML コード部分```html
<template>
<
   view class="content">

       
       <CCBCashTree v -if ="(curTreeName.length > 0)" :treeName="curTreeName" :treeData="curTreeData">
       </CCBCashTree>

   </view>
</template>

「」

#### JS コード (コンポーネント充填データの導入)
```javascript
<script>
   import CCBCashTree from '@/components/CCBCashTree.vue'

   デフォルトのエクスポート {        コンポーネント: {

           CCBキャッシュツリー

       },
       data() {            return {                title: 'Hello',                curTreeName: '',                curTreeData: []            }        },        onLoad() {

           this.curTreeName = "広州汽車集団有限公司";

           let tmpArr = [];
           for (let i = 0; i < 4; i++) {                // 企業保有データをシミュレート                let s = {                    'ratio': '20%',                    'amount': '10 million',                    'label ': '広州 | 先進製造 | ハイテク',                    'investName': '広州汽車工業集団有限公司' + i,                    'investType': '0',                    'invests':[{'ratio': ' 20%' 、                    'amount': '1000 million'、                    'label': '広州 | 自動車 | ハイテク'、                    'investName': 'GAC Toyota Co., Ltd.'、                    'investType': '0',},                    {'ratio': '10%',                    'amount': '90000万',


               '1',}] };                let tmpDict = Object.assign(s, {                    "isOpen": false








               });
               tmpArr.push(tmpDict);

           }

           // 個人保有データをシミュレート
           let t = {                'ratio': '10%',                'amount': '9 million',                'label': 'shareholder',                'investName' : '曽慶紅',                'investType': '1',                'invests':[]            };            let tmpDict = Object.assign(t, {                "isOpen": false            });            tmpArr.push(tmpDict);



           this.curTreeData = tmpArr;
       }、
       メソッド: {

       }
   }
</script>

「」

#### CSS
```CSS
<スタイル>

   ページ{        背景色: #f6f6f6;    .content { 表示    :        フレックス;        フレックス方向: 列;



   }


</スタイル>

「」

最新のフロントエンドは、4レベル以下の株式構造、模倣企業ChachaとTianyancha系列の投資機関、ツリーツリー構造の保有構造をサポートしています。

おすすめ