この記事では、package.json の設定や jquery の自動読み込みなど、主に Vue での ztree の使用方法を紹介します。必要な方は参考にしていただければ幸いです。あなた。
package.jsonを設定する
jqueryとztreeをパッケージ化してダウンロードする
"dependencies": { "element-ui": "^2.1.0", "vue": "^2.5.2", "axios": "^0.16.1", "jquery":"3.3.1", "vue-awesome":"2.3.4", "ztree":"3.5.24" },
jqueryを自動的にロードする
プロジェクトがビルドされると、jqueryが自動的にロードされ、jQueryに出力され、ztreeで使用されます。 。
plugins: [ new webpack.ProvidePlugin({ jQuery:'jquery', $:'jquery', }) ]
jqueryとztreeをインポートします
import 'jquery' import 'ztree' import 'ztree/css/metroStyle/metroStyle.css'
ztreeを呼び出してツリー構造を生成します
export default { data() { return { nodeData: [{ name: "父节点1", children: [ {name: "子节点1"}, {name: "子节点2"} ] }], setting:{ view: { showLine: false }, data: { simpleData: { enable: true } }, callback: { onClick: this.getFileDesc } } } }, mounted(){ let nodeData = this.nodeData $.fn.zTree.init($("#uploadtree"), this.setting, nodeData); } }
関連推奨事項:
jQueryはzTreeプラグインを使用してドラッグを実装します切妻ツリーのコード共有
jQuery プラグイン zTree は、第 1 レベルのノード データの取得例の共有を実装します
zTree の使用例を簡単に実装するための 5 つのステップ
以上がvueでztreeを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。