将El-Tree组件改造为自定义新增、修改和删除功能

2024-01-06 20:03:08

随着技术不断发展，用户界面设计变得越来越重要。El-tree是一个强大的Element-UI组件，用于显示和处理分层数据。然而，有时我们需要修改组件以满足特定需求。本文将介绍如何自定义El-tree组件，添加新增、修改和删除功能。

自定义El-Tree

首先，我们需要从Element-UI网站安装El-tree组件。

npm install element-ui

导入组件后，我们可以创建一个新的Vue组件，并将其作为El-tree的包装器组件。

<template>
  <el-tree :data="treeData" :props="defaultProps" ref="tree"></el-tree>
</template>

<script>
import { ElTree } from 'element-ui';

export default {
  components: { ElTree },
  data() {
    return {
      treeData: [
        {
          label: '一级 1',
          children: [
            { label: '二级 1-1' },
            { label: '二级 1-2' },
          ],
        },
        {
          label: '一级 2',
          children: [
            { label: '二级 2-1' },
            { label: '二级 2-2' },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
};
</script>

在包装器组件中，我们定义了treeData作为要显示的层级数据。defaultProps指定了数据中子节点和标签的属性。

新增节点

现在，让我们添加新增节点的功能。我们需要在包装器组件中定义一个方法来处理新增按钮的点击事件。

methods: {
  addNode() {
    this.treeData.push({ label: '新增节点' });
  },
},

最后，在包装器组件的模板中添加一个按钮来触发新增功能。

<template>
  <el-tree :data="treeData" :props="defaultProps" ref="tree">
    <template #default="{ node, data }">
      <span>{{ data.label }}</span>
      <el-button @click="addNode">新增</el-button>
    </template>
  </el-tree>
</template>

修改节点

接下来，我们将添加修改节点的功能。首先，我们需要一个编辑按钮。

<template>
  <el-tree :data="treeData" :props="defaultProps" ref="tree">
    <template #default="{ node, data }">
      <span>{{ data.label }}</span>
      <el-button @click="addNode">新增</el-button>
      <el-button @click="editNode(node)">编辑</el-button>
    </template>
  </el-tree>
</template>

然后，我们在包装器组件中定义编辑方法。

methods: {
  ...
  editNode(node) {
    node.label = prompt('输入新标签');
  },
},

删除节点

最后，让我们添加删除节点的功能。

<template>
  ...
    <template #default="{ node, data }">
      ...
      <el-button @click="deleteNode(node)">删除</el-button>
    </template>
  ...
</template>

methods: {
  ...
  deleteNode(node) {
    const parent = node.parent;
    const index = parent.children.indexOf(node);
    parent.children.splice(index, 1);
  },
},