el-tree slot插槽 实现 下一级现新增节点

1.template 使用default 那个插槽实现的

  <el-tree
      :data="dataSource"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span v-if="!data.appendFlag&&!data.showEdit">{{ node.label }}</span>
          <input
            v-focus
            type="text"
            v-if="data.appendFlag"
            v-model="data.label"
            @blur="changeEdit(node, data)"
          />
          <input
            v-focus
            type="text"
            v-if="data.showEdit"
            v-model="data.label"
            @blur="changeEdit(node, data)"
          />
          <span>
            <a @click="append(data)"> Append </a>
            <a @click="editNode(data)"> 编辑 </a>
            <a @click="removeNode(node,data)"> 删除 </a>
          </span>
        </span>
      </template>
    </el-tree>```
2.script
//左侧树数据
const dataSource = ref([
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1'
          },
          {
            id: 10,
            label: 'Level three 1-1-2'
          }
        ]
      }
    ]
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1'
      },
      {
        id: 6,
        label: 'Level two 2-2'
      }
    ]
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1'
      },
      {
        id: 8,
        label: 'Level two 3-2'
      }
    ]
  }
])
//添加showEdit属性 是否为编辑
dataSource.value = dataSource.value.map((item) => ({
  ...item,
  showEdit: false
}))

let id = 1000
import { ref, nextTick } from 'vue'

const vFocus = {
  //必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。
  beforeMount: (el) => {
    // 在元素上做些操作
    nextTick(() => {
      el.focus() //获取焦点
    })
  }
}
const changeEdit = (node, data) => {
  data.appendFlag = false
  data.showEdit = false
}
const drawer = ref(true)

//添加节点
const append = (data) => {
  //appendFlag:是否是新增的标识，  newAppend的值是新增节点的值 showEdit：是否编辑
  const newChild = {
    id: id++,
    label: '',
    children: [],
    appendFlag: true,
    newAppend: '',
    showEdit: false
  }
  newChild.label = data.newAppend
  if (!data.children) {
    data.children = []
  }
  data.children.push(newChild)
  dataSource.value = [...dataSource.value]
}
//编辑节点
const editNode = (data) => {
  data.showEdit = true
}
//删除节点
const removeNode =(node,data)=>{
  const parent = node.parent
  const children=parent.data.children || parent.data
  const index = children.findIndex((d) => d.id === data.id)
  children.splice(index, 1)
  dataSource.value = [...dataSource.value]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139