ホームページ > 記事 > ウェブフロントエンド > ツリーコンポーネント要素 ui について話しましょう
ここでは要素 ui についてはあまり紹介しません。ツリー コンポーネントを動的にロードする最も一般的に使用される方法を直接紹介します。
ツリー コンポーネントを導入するコードは次のとおりです:
<el-tree :data="data" :props="props" lazy @node-click="handleNodeClick" :load="loadNode"></el-tree>/* 动态加载lazy参数和load方法是必选的, lazy:为节点store(TreeStore)中的属性,可输出当前节点进行查看 load:加载子数据的方法,用法为function(node,reslove){} */<script> export default { data() { return { props:{ //配置父子树的属性名 label:'parent', children:'sub' } }; }, methods: { //点击节点的处理事件,可以更改显示节点的内容 handleNodeClick(data){ //在这里改变加载的数据无法刷新树数据 //to do something ,load data from server and show the data to the view if(data.label == 1){//判断点击节点,choose the node you clicked /*to do something*/ } console.log(data.label) console.log(data) }, loadNode(node, resolve){ console.log(node); if (node.level === 0) { //初始第一层节点,初始化数据,根节点配置 return resolve([{ label: '1' }, { label: '2' }, { label: '3' },]); } var data = []; if(node.data.label == 1){//点击树节点1的处理 data = [{label:'1-1'},{label:'1-2'},{label:'1-3'}]; } if(node.data.label == 2){//点击树节点2的处理 data = [{label:'2-1'},{label:'2-2'},{label:'2-3'}]; } resolve(data)//加载下级数据! } } };</script>
次に、2 つの一般的な方法を分析します。ツリー
1. ノードクリック: ノードがクリックされたときのコールバック。合計 3 つのパラメータが順にあります: データ属性に渡される配列内のノードに対応するオブジェクト、ノードに対応するノード、ノードコンポーネント自体。つまり、 function (data, node, vuecomponent) {}
node-clikc方法:function(data,node,vueComponent){ //可以进行常用的点击view层展示切换} data:参数为我们点击的节点的数据对象 node:(node对象) checked:false//是否选中 childNodes:Array(3)//子节点 data:Object//data数据对象 expanded:true//是否可以展开 id:1//node的id indeterminate:false//和checkbox结合的属性,选框的样式 isLeaf:false level:1//点击的node层级 loaded:true//加载完 loading:false//加载中 parent:Node//父级node store:TreeStore//树形数据的store text:null visible:(...) disabled:(...) icon:(...) key:(...) label:"1" __ob__:Observer {value: Node, dep: Dep, vmCount: 0} get checked:ƒ reactiveGetter() set checked:ƒ reactiveSetter(newVal) get childNodes:ƒ reactiveGetter() set childNodes:ƒ reactiveSetter(newVal) get data:ƒ reactiveGetter() set data:ƒ reactiveSetter(newVal) get expanded:ƒ reactiveGetter() set expanded:ƒ reactiveSetter(newVal) get id:ƒ reactiveGetter() set id:ƒ reactiveSetter(newVal) get indeterminate:ƒ reactiveGetter() set indeterminate:ƒ reactiveSetter(newVal) get isLeaf:ƒ reactiveGetter() set isLeaf:ƒ reactiveSetter(newVal) get level:ƒ reactiveGetter() set level:ƒ reactiveSetter(newVal) get loaded:ƒ reactiveGetter() set loaded:ƒ reactiveSetter(newVal) get loading:ƒ reactiveGetter() set loading:ƒ reactiveSetter(newVal) get parent:ƒ reactiveGetter() set parent:ƒ reactiveSetter(newVal) get store:ƒ reactiveGetter() set store:ƒ reactiveSetter(newVal) get text:ƒ reactiveGetter() set text:ƒ reactiveSetter(newVal) get visible:ƒ reactiveGetter() set visible:ƒ reactiveSetter(newVal) __proto__:Object 具体用法//node-click函数handleNodeClick(data,parent,child){ //to do something ,load data from server and show the data to the view if(data.label == 1){//判断点击节点,进行view层试图切换,choose the node you clicked /*to do something*/ } }
2. Load メソッド
load: サブデータをロードするメソッド、一般的な形式は function (node, reslove) {} です。使用するときは、Promise の互換性を忘れないでください。約束
以上がツリーコンポーネント要素 ui について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。