Vueでは、要素ツリーコントロールを使用してツリーテーブルの効果を実現します。 インデントを使用して木のような効果を実現します 実装効果図依存関係をインストールする
エレメント公式サイト カスタムツリーコントロールダイアグラム内のコントロールの分布を分析します。各パラメータには固定 このコードは主に <テンプレート> <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'], }, { ラベル: '[上段] 梁名', 子供たち: [ { ラベル:['名前','RS49'], }, { ラベル:['freq_min','10950'], }, { ラベル:['freq_max','14500'], }, { ラベル:[]'グループ('+'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: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ピクセル; 表示:インラインブロック; テキスト配置:左; } </スタイル> その他の実装要素ツリーコントロールに点線を追加する Element-uiはツリーコントロールノードにアイコンを追加する機能を実装します 要約するツリーテーブルは主に、要素のツリーコントロールのカスタム関数renderContentとCSSを組み合わせて実装されます。 この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: display または visibility を通じて HTML 要素を表示または非表示にする
概要ボリュームは、さまざまなストレージ リソースを抽象化および仮想化したものです。ストレージ リソー...
この記事の例では、右上隅の時間表示のリアルタイム更新を実現するためのVueの具体的なコードを紹介しま...
key_lenの意味MySQL では、次に示すように、explain を使用して SQL ステートメ...
ステップ: 1. 仮想マシンディレクトリに新しいdocker-compose.ymlファイルを作成し...
この記事の例では、記事の折りたたみと展開の機能を実現するためのjQueryの具体的なコードを参考まで...
目次序文背景大きな推測パターンを見つける構造とスタイルコンポーネントの実装パラメータキーボードの種類...
目次1. ストアドプロシージャ1.1. 基本構文1.2 実行権限を指定してストアドプロシージャを作成...
プロフェッショナルな Web デザインは複雑で時間がかかります。 HTML と CSS フレームワー...
目次序文ウェブHTTP サーバーファイルサーバー練習する序文Node.js 開発の目的は、JavaS...
1. VMwareでCentos7を接続し、固定IPを設定する1) まず、仮想イメージ名を右クリック...
HTML5 では、入力用のネイティブ プレースホルダー属性が追加されており、これは高度なブラウザでサ...
目次リアクティブ機能使用法: toRef 関数 (理解するだけ)使用法: ref関数レスポンシブデー...
<br />まずアイデアを考え、次にスケッチを描き、次にマウスでスケッチし、最後にフラッ...
序文フロントエンド開発では、目的のコンテンツを取得するためにループをトラバースする必要がある状況に頻...
最近MySQLを5.7にアップグレードしましたが、WordPressでデータのインポート時にエラーが...