이 글에서는 package.json 구성과 jquery 자동 로딩 방법을 포함하여 Vue에서 ztree를 사용하는 방법을 주로 소개합니다. 이 글은 매우 자세하게 소개되어 있으니 필요하신 분들은 참고하시면 됩니다
I 아래에서 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); } }
위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
vue.js에서 vue-fontawesome 사용 정보
위 내용은 vue에서 ztree를 사용하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!