今回は、vue.js ツリー コントロールの使用方法について詳しく説明します。vue.js ツリー コントロールを使用する際の 注意事項 は何ですか?実際のケースを見てみましょう。
実装原理
要素UIのソースコードを変更し、ソースコード内のツリーモジュールを抽出します
その後、要素自身のチェックボックスと他のコンポーネントをiviewのチェックボックスに変更し、互換性を持たせます
最後に要素スタイルを変更しますiview スタイルに、自分でいくつかのスタイルも追加しました
新しいツリー コンポーネントは、iview のスタイルである要素のロジックであると言えます
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <template>
<p
@click.stop= "handleClick"
v-show= "node.visible" >
<p class = "chu-tree-nodecontent"
:style= "{ 'padding-left': (node.level - 1) * tree.indent + 'px' }" >
<span : class = "arrowClasses" @click.stop= "handleExpandIconClick" >
<Icon v- if = "!node.isLeaf" type= "arrow-right-b" ></Icon>
</span>
<Checkbox
v- if = "showCheckbox"
:value= "node.checked"
:indeterminate= "node.indeterminate"
:disabled= "!!node.disabled"
@click.native.stop
@on-change= "handleCheckChange" ></Checkbox>
<span
v- if = "node.loading"
class = "ivu-load-loop" >
</span>
<node-content :node= "node" ></node-content>
</p>
<collapse-transition>
<p
v-show= "expanded" >
<el-tree-node
:render-content= "renderContent"
v- for = "child in node.childNodes"
:key= "getNodeKey(child)"
:node= "child"
@node-expand= "handleChildNodeExpand" >
</el-tree-node>
</p>
</collapse-transition>
</p>
</template>
|
ログイン後にコピー
iview のチェックボックス コンポーネントのロジックが異なるため、handleCheckChange を変更し、機能が異なるため、互換性が必要です
1 2 3 | handleCheckChange(ev) {
this.node.setChecked(ev, !this.tree.checkStrictly);
},
|
ログイン後にコピー
完成したプロジェクト構造を抽出し、npm プラグインにカプセル化します
使用説明書
iview をインストールする必要があります
すべてのスタイルは ivew に置き換えられます
機能はすべて element-ui と同じです
1 2 3 | import chuView from 'chu-tree-iview'
Vue. use (chuView)
<chu-tree></chu-tree>
|
ログイン後にコピー
使い方ドキュメント element-ui と全く同じです
この記事の事例を読んだ後は、方法をマスターしたと思います。さらに興味深い情報については、お支払いください。 PHP 中国語 Web サイトの他の関連記事にも注目してください。
推奨読書: アップロードされたファイルの詳細を取得するための
jquery
vue 親コンポーネントから親コンポーネントに値を渡す手順の詳細な説明
以上がvue.jsツリーコントロールの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。