iview - tree节点的相关操作

最新有一个新的需求，即在iview tree的自定义节点基础上，对当前节点进行相关的操作，参考相关博客，整理了以下两种方案。

• 右键弹出相关操作按钮 参考博客

实现细节：

<template>
  <div>
    <Tree
      :data="kindData"
      :render="renderContent"
    ></Tree>
    <Button
      type="primary"
      @click="submit"
    >提交</Button>
  </div>

</template>
<script>
import $ from 'jquery/dist/jquery'

export default {
   
  data () {
   
    return {
   
      editState: false,
      // 输入框要修改的内容
      inputContent: '',
      // 修改前的TreeNode名称
      oldName: '',
      kindData: [
        {
   
          "expand": true,
          "title": "父节点1",
          "id": null,
          "code": "01",
          "parentCode": "0",
          "children": [
            {
   
              "tr_parentCode": "01",
              "tr_userid": null,
              "tr_name": "11",
              "count": "0",
              "tr_code": "0101",
              "tr_count": 15,
              "title": "子节点1",
              "id": null,
              "code": "0101",
              "parentCode": "01",
              "nodeKey": 1
            }
          ],
          "nodeKey": 0
        },
        {
   
          "expand": true,
          "title": "父节点2",
          "id": null,
          "code": "02",
          "parentCode": "0",
          "children": [
            {
   
              "tr_parentCode": "02",
              "tr_userid": null,
              "tr_name": "子节点2-1",
              "count": "0",
              "tr_code": "0202",
              "tr_count": 0,
              "title": "子节点2-1",
              "id": null,
              "code": "0202",
              "parentCode": "02",
              "nodeKey": 3
            },
            {
   
              "tr_parentCode": "02",
              "tr_userid": null,
              "tr_name": "子节点2-2",
              "count": "0",
              "tr_code": "0203",
              "tr_count": 0,
              "title": "子节点2-2",
              "id": null,
              "code": "0203",
              "parentCode": "02",
              "nodeKey": 4
            }
          ],
          "nodeKey": 2
        },
        {
   
          "expand": true,
          "title": "父节点3",
          "id": null,
          "code": "07",
          "parentCode": "0",
          "children": [
            {
   
              "tr_parentCode": "07",
              "tr_userid": null,
              "tr_name": "子节点3-1",
              "count": "0",
              "tr_code": "0700",
              "tr_count": 23,
              "title": "子节点3-1",
              "id": null,
              "code": "0700",
              "parentCode": "07",
              "nodeKey": 49
            }
          ],
          "nodeKey": 48
        },
        {
   
          "expand": true,
          "title": "父节点4",
          "id": "1377",
          "code": "48f84f52884845b999bcf4f3d5978a39",
          "parentCode": "0",
          "children": [],
          "nodeKey": 55
        }
      ]
    }
  },
  methods: {
   
    // 生成唯一id
    uuid () {
   
      var s = []
      var hexDigits = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
      for (var i = 0; i < 36; i++) {
   
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = '-'

      var uuid = s.join('')
      return uuid
    },
    renderContent (h, {
     root, node, data }) {
   
      return h(
        'span',
        {
   
          class: 'myMenu',
          domProps: {
   
            id: data.code,
          },
          style: {
   
            display: 'inline-block',
            width: '100%',
          },
          on: {
   
            click: ($event) => {
   
              $event.stopPropagation()
            },
          },
        },
        [
          h('span', [
            h('Icon', {
   
              props: {
    // data.children 属性存在，则证明是父节点
                type: data.children ? 'ios-folder-open' : 'md-document'
              },
              style: {
   
                marginRight: '8px',
                marginTop: '-3px',
                color: data.children ? '#ffcc00' : '',
                fontSize: '18px',
              },
            }),

            //开始
            h(
              'Dropdown',
              {
   
                props: {
   
                  transfer: true,
                  trigger: 'contextMenu',
                  placement: 'bottom',
                },
                nativeOn: {
   
                  mousedown