vue は Element に基づいてカスタムツリーインスタンスメソッドを構築します-jsチュートリアル-php.cn

vue は Element に基づいてカスタムツリーインスタンスメソッドを構築します

小云云

リリース： 2018-02-05 14:08:41

オリジナル

2131 人が閲覧しました

プロジェクトに取り組んでいるとき、テーブルツリーを構築するためにカスタムツリーコントロールを使用する必要があります。githubで検索しましたが、コンポーネントの説明を確認したところ、適切な（見栄えの良い）ものが見つかりませんでした。 Element のコントロールでは、レンダリングを使用してノードスタイルをカスタマイズできることがわかりました。そのため、これに基づいて、追加、削除、変更できるツリーコンポーネントがカプセル化されています。その使用方法と実装を共有します。この記事では主に Element をベースにカスタムツリーを構築する Vue のサンプルコードを紹介します。興味のある方は参考にしていただければ幸いです。

コントロールのデモ

github に投稿された GIF がスタックしている可能性があります。静的リソースを他にハングできる場所を知っている人はいますか? 。！

コントロールの使用法

概要

要素UIツリーコントロールの二次カプセル化に基づいています
ノードを編集および削除するためのインターフェイスを提供します
の次のフックですbusiness 処理が失敗した場合は、next(false) ロールバック操作を使用できます。コントロールのソースコードについては、github
documentation
props

property

descriptiontypeを参照してください。 valuesource データは v-model を使用して 2 つの方法でバインドできますArray


		events

Event name

DescriptionParametersSaveEdit 編集後に「保存」をクリックしますまたはツリーノードの追加イベント(親ノードデータ、現在のノードデータ、次)DelNodeノード削除イベント(親ノードデータ、現在のノードデータ、次)NodeClickノードクリックイベント(現在のノードデータ)




		ソースデータの説明

属性

説明値ツリーノードの一意の識別子ラベルディスプレイツリーノードの名前status(1:編集状態)(0:表示状態)(-1編集不可状態)children子ノードデータ呼び出し例

 <m-tree
  v-model="tableTree"
  @SaveEdit="SaveEdit"
  @DelNode="DelNode"
  @NodeClick="handleNodeClick"></m-tree>

SaveEdit(parentNode,data,next){
  var param = {
   parentNode:parentNode,
   node:data
  }
  this.$http.post(URL,param).then((response) => {
   if(response.status == 200){
    next(true,response.body.data.nodeId)
   }else{
    next(false)
   }
  })
}

ログイン後にコピー

実装方法

子ノードのテンプレートを構築する

 <span class="span_item">
  <span @click="Expanded">
   <Input v-if="node.status == 1" style="width: 100px;" v-model="node.label" size="small" ></Input>
   <Icon v-if="node.status == 0" type="asterisk"></Icon>
   <Icon v-if="node.status == -1" type="ios-keypad-outline"></Icon>
   <span v-if="node.status != 1">{{node.label}}</span>
  </span>
  <span v-if="node.status == 1">
   <Button style="margin-left: 8px;" size="small" type="success" icon="checkmark-circled" @click="SaveEdit">确认</Button>
   <Button style="margin-left: 8px;" size="small" type="ghost" icon="checkmark-circled" @click="CancelEdit">取消</Button>
  </span>
  <span class="span_icon">
    <Icon v-if="node.status == 0" style="margin-left: 8px" color="gray" type="edit" size="16" @click.native="OpenEdit"></Icon>
    <Icon v-if="node.status == 0" style="margin-left: 8px" type="plus-round" color="gray" size="16" @click.native="Append"></Icon>
    <Icon v-if="node.status == 0&&node.children.length < 1" style="margin-left: 8px" type="ios-trash" color="red" size="18" @click.native="Delete"></Icon>
  </span>
 </span>

ログイン後にコピー

子ノードは$emit

を通じて親ノードのイベントを通知する

SaveEdit(){
  //保存节点事件
  this.$emit(&#39;SaveEdit&#39;,this.nodeData)
},

ログイン後にコピー

コアの実装親ノードの renderContent 関数を使用して子ノードテンプレートをロードし、クリックしてノードを保存しますビジネスパラメータは、ビジネス操作が失敗したとき (ネットワークリクエストの失敗、サーバー例外など) のデータロールバックのために runParam に保存されます

  <el-tree
   class="filter-tree"
   style="overflow:auto;"
   :data="treeData"
   :filter-node-method="filterNode"
   @node-click="handleNodeClick"
   ref="tree"
   node-key="value"
   :expand-on-click-node="false"
   :render-content="renderContent"
   default-expand-all>
  </el-tree>
  //子节点模板
  renderContent(h, { node, data, store }) {
    return h(TreeItem,{
     props:{
      value:data,
      treeNode:node
     },
     on:{
      input:(node)=>{
       data = node
      },
      Append: () => {
       node.expanded = true
       data.children.push({ value: this.$utilHelper.generateUUID(), label: &#39;请输入模块名称&#39;, children: [],status:1,isAdd:true })
      },
      //保存节点
      SaveEdit:(nodeData)=> {
       //递归查找父节点
       var parentNode = this.$utilHelper.getNode(this.treeData,data.value).parentNode
       this.runParam.parentNode = parentNode
       this.runParam.data = data
       this.runParam.nodeData = nodeData
       this.$emit(&#39;SaveEdit&#39;,parentNode,data,this.CanSaveNext)
      }
     }
    })
   }

ログイン後にコピー

操作結果フック。次の関数が false を渡すと操作は失敗し、runParam のパラメーターを使用してロールバックされ、このノードの編集および保存操作は無効になります。