Iview元件庫之樹形控制元件增刪改功能

chirstopther發表於2019-03-28
View控制元件

Iview元件庫樹形控制元件增刪改

iview元件庫中有個樹元件tree，根據官方示例，通過自定義元件實現renderContent的效果，實現了樹元件的增刪改操作。

實現的效果

tree

iview中tree示例

tree
由iview官方文件我們可以知道，tree是有root、node、data組成。 root 是根節點 node:當前節點 data:當前節點的資料

讓我們開始用程式碼實現它

tree Component基本

<Tree :data="treeData" :render="renderContent"

data是tree的一個props，用來生成tree的資料，型別是Array，預設值是[]。通過treeData給data賦值

render是tree的一個props，用來自定義渲染內容 我們通過renderContent方法實現自定義的render效果

import TreeRender from './TreeRender'
export default {
name: 'Column',
components: {},
data () {
return {
 treeData: [],
  // 樹結構
  treeList: null
}
複製程式碼

},

renderContent (h, {root, node, data}) {
  let that = this
  return h(TreeRenderRender, {
     props: {
      treeRoot: root,
      treeNode: node,
      treeData: data
    },
    on: {
      nodeAdd: (d) => that.handleAdd(d),
      nodeEdit: (r, n, d) => that.handleEdit(r, n, d),
      nodeDel: (r, n, d) => that.handleDelete(r, n, d),
      nodeAfterEdit: (r, n, d) => that.handleAfterEdit(r, n, d)
    }
  })
},
複製程式碼
nodeAdd是新增方法
nodeEdit是點選編輯後的方法
nodeAfterEdit是編輯後失去焦點的方法
nodeDel是刪除的方法
複製程式碼

render基本元件

<span>
<span v-if="isEdit">
  <input size="small" v-model="treeData.title" autofocus
  @blur="nodeEditPass(treeRoot,treeNode,treeData)"/>
</span>
<template v-else>
<span>{{treeData.title}}</span>
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<span v-show="!isEdit">
  <Button type="info" size="small"  icon="md-add" @click="nodeAdd(treeData)">新增</Button>
  <Button type="primary" size="small" icon="md-create" @click="nodeEdit(treeRoot,treeNode,treeData)">修改</Button>
  <Button type="error" size="small" icon="md-close" @click="nodeDel(treeRoot,treeNode,treeData)">刪除</Button>
</span>
</template>
</span>
複製程式碼

props: { // 樹的根節點 treeRoot: { type: Array }, // 當前節點 treeNode: { type: Object }, // 當前節點的資料 treeData: { type: Object }

 nodeAdd (d) {
  this.$emit('nodeAdd', d)
},
nodeEdit (r, n, d) {
  this.isEdit = true
  d.isEdit = this.isEdit
  d.title = this.treeData.title
  this.$set(d, 'isEdit', d.isEdit)
  this.$set(d, 'title', d.title)
  this.$emit('nodeEdit', r, n, d)
},
nodeEditPass (r, n, d) { // 編輯完成
  this.isEdit = false
  d.isEdit = this.isEdit
  d.title = this.treeData.title
  this.$set(d, 'isEdit', d.isEdit)
  this.$set(d, 'title', d.title)
  this.$emit('nodeAfterEdit', r, n, d)
},
nodeDel (r, n, d) {
  this.$emit('nodeDel', r, n, d)
}

通過$emit的方式將增、改、刪的操作拋給column元件
複製程式碼

思考一下我們還缺少什麼？

  1. 負責給繫結data的treeData
  2. 因為data是Array，需要寫一個遞迴方法
  3. 增刪改的方法的實現

詳細程式碼見我的github

github.com/zhangzhemin…

個人部落格zhangzheming.club

相關文章