el-tree的自定义增删改查

el-tree的自定义增删改查

<template>
  <div class="mapping-data">
    <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>
  </div>
</template>

<script setup>
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 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]
}
//左侧树数据
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
}))
</script>

<style scoped lang="scss">
.mapping-data {
  padding: 10px;
}
</style>