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]
}