1. レンダリング2. データをバインドし、ツリーテーブルにラベルを追加するツリー コントロールのツリー ノードにイメージまたは要素 UI アイコンを追加する場合は、ツリー テーブル バインディング データにラベル アイコンを追加できます。 子供たち: [ { アイコン:'el-icon-top-right', ラベル: ['ビーム名',''], 子供たち: [ { ラベル:['名前','RS49'], }, { アイコン:'src/assets/images/Organization.png', ラベル:['グループ('+'3'+')',''] 子供たち:[ { ラベル:['10600361','10950','11200','0'] } ] } ] } ]、 ツリーコントロールのカスタム関数 element-uiのアイコンタグと同じクラスを直接設定します imgタグには自分の画像のアドレスを追加する必要があります レンダリングコンテンツ(h,{ノード,データ,ストア}){ //div はツリー コントロールの行を表し、div には 3 つの span タグが含まれます // ノードのラベル配列の数を決定し、3 項演算によってクラスを選択します // ツリーコントロールの配置を制御するクラスを設定します return h('div',[ // ツリーコントロールのカスタム関数にアイコンと画像タグを追加します // img タグには独自の画像のアドレスを追加する必要があります h('span',{class:'top-right'}), h('img',{src:data.icon}), h('span', {class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]), h('span', {class:'groupStyle'},node.label[1]), h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label.length === 2 ? '':node.label[2]) ]); }, 3. すべてのコード<テンプレート> <div class="mytree"> <el-tree :data="ツリーデータ" :props="デフォルトプロパティ" @node-click="ハンドルNodeClick" インデント="0" :render-content="レンダリングコンテンツ" </el-tree> </div> </テンプレート> <script lang="ts"> 'vue' から {defineComponent, ref} をインポートします。 エクスポートデフォルトdefineComponent({ コンポーネント: {}, データ() { 戻る { ツリーデータ: [ { // タイプ:1, ラベル: 'notice-id1', 子供たち: [ { ラベル: ['衛星名コード', 'ZOHREH-2'], }, { ラベル: ['組織', 'IRN'], }, { ラベル: ['周波数範囲', '10950-1450'], }, { アイコン:'el-icon-top-right', ラベル: ['ビーム名',''], 子供たち: [ { ラベル:['名前','RS49'], }, { ラベル:['freq_min','10950'], }, { ラベル:['freq_max','14500'], }, { アイコン:'src/assets/images/Organization.png', ラベル:['グループ('+'3'+')',''] 子供たち:[ { ラベル:['10600361','10950','11200','0'] }, { ラベル:['10600361','10950','11200','0'] }, { ラベル:['10600361','10950','11200','0'] } ] } ] }, ]、 }, ]、 デフォルトプロパティ: { 子供: 「子供達」 ラベル: 'ラベル', }, } }, 方法:{ // カスタムツリーコントロール関数ノードは各ノードを表します renderContent(h,{node,data,store}){ //div はツリー コントロールの行を表し、div には 3 つの span タグが含まれます // ノードのラベル配列の数を決定し、3 項演算によってクラスを選択します // ツリーコントロールの配置を制御するクラスを設定します return h('div',[ // ツリー コントロールにアイコンと画像のラベルを追加します。カスタム関数 h('span',{class:[data.icon,data.icon==='el-icon-top-right'? 'top-right':'bottom-left']}), h('img',{src:data.icon === 'src/assets/images/Organization.png' ? data.icon:''}), h('span', {class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label[0]), h('span', {class:'groupStyle'},node.label[1]), h('span',{class:node.label.length === 2 ? 'nodeStyle':'groupStyle'},node.label.length === 2 ? '':node.label[2]) ]); }, } }) </スクリプト> <style lang="scss" スコープ> .nodeStyle{ 幅:110ピクセル; 表示:インラインブロック; テキスト配置:左; } .groupStyle{ 幅:150ピクセル; 表示:インラインブロック; テキスト配置:左; } </スタイル> その他の実装Vueは要素ツリーコントロールを通じてツリーテーブルを実装します 要素ツリーコントロールに点線を追加する 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: HTML で複数のクラス属性を定義する場合の無効な解決策
>>: 高品質なコードを書く Web フロントエンド開発実践書の抜粋
新しい用途new の機能は、コンストラクターを通じてインスタンス オブジェクトを作成することです。イ...
目次Cocos Creator のリソース管理に関する問題リソースの依存関係リソースの使用レスローダ...
検索テキストボックスにテキストを設定すると、フォーカスを外すと位置がジャンプしますコードをコピーコー...
順序なしリストのアプリケーションネストコードをコピーコードは次のとおりです。 <!DOCTYP...
画像タグ: <img> ページに画像を挿入するには、「src」属性を持つ「img」タグを...
clear プロパティを使用してフロートをクリアすることはよくあることであり、clear プロパティ...
css-vars-ポニーフィルCSS 変数を使用して Web ページのスキニングを実現すると、互換...
この記事では、カレンダー効果を素早く実現するためのJavaScriptの具体的なコードを例として紹介...
データ分析会社Net Market Shareによると、Linuxデスクトップオペレーティングシステ...
違い: 1. InnoDB はトランザクションをサポートしていますが、MyISAM はサポートしてい...
序文この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安...
MySQL はインストールが簡単で、高速で、豊富な機能を備えています。これはオープンソース運動のベン...
Remレイアウトの適応Vant のスタイルでは、デフォルトで px を単位として使用します。rem ...
主要な Web サイトと個人的な習慣に従って、Docker ソースを追加するには次の方法を使用します...