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 フロントエンド開発実践書の抜粋
目次実生活からの例クエリが遅い最適化する方法カウント制限最大値と最小値 min&max実生活...
フォーム要素はたくさんあります。簡単にまとめると、次のようになります。私のやり方では、主にテキスト ...
夜にMACの電源を入れたところ、突然ルートアカウントがMySQLに正常にログインできなくなったため、...
Apache.POI の HSSFWorkbook を使用して Excel にエクスポートします。具...
検索ミラー docker 検索 rocketmq画像バージョンを表示他の画像を表示したい場合は、画像...
1. 監視アーキテクチャ図 2. 実装のアイデアJenkins に Metrics プラグインをイン...
MySql データベースのサブクエリ:サブクエリ: 選択クエリ ステートメント内に別の選択ステートメ...
【1】<i></i>タグと<em></em>タグ同じ...
データのエクスポートエラーを報告する 「secure_file_priv」のような変数を表示します。...
エラー メッセージ:ストアの更新、挿入、または削除ステートメントが予期しない行数 (0) に影響を与...
さまざまな色の16進コード表[パート1] 赤とピンク、およびそれらの 16 進コード。 #99003...
この記事では、主に Vue バックグラウンド管理システムのページング機能の実装を紹介し、次のように共...
テーブル作成コマンドには以下が必要です。 テーブルの名前フィールド名各フィールドを定義します(タイ...
目次ノードはMysqlに接続しますMySQLモジュールをインストールするMySQLに接続するよく使わ...
新しい Linux ディストリビューションには rc.local ファイルがなくなりました。サービス...